If you open the developer tools and watch the console when loading the website, you'll see some developer warnings for various components in the codebase.
This issue is regarding the warning for the Header component:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Header`. See https://reactjs.org/link/warning-keys for more information.
li
Header@http://localhost:3000/static/js/main.chunk.js:4494:86
Router@http://localhost:3000/static/js/vendors~main.chunk.js:41042:30
BrowserRouter@http://localhost:3000/static/js/vendors~main.chunk.js:40662:35
AuthContextProvider@http://localhost:3000/static/js/main.chunk.js:1937:29
App
This warning refers to the markup generated by the categories.map iteration. When you're generating markup in a loop, each element created (in this case, the <li> element) should have a key prop with a unique value assigned to it- in this case, the category primary key id is a convenient and appropriate value to assign to it.
This is just a warning- the site is still working, but this is an important PERFORMANCE optimization for React components. When repeated elements have a unique key prop, React can watch those ids to know when an element is added or removed. Without it, React just sees a bunch of duplicate elements created in a loop, and therefore has to potentially destroy and re-create every element each time the loop gets run.
If you open the developer tools and watch the console when loading the website, you'll see some developer warnings for various components in the codebase.
This issue is regarding the warning for the Header component:
This warning refers to the markup generated by the
categories.mapiteration. When you're generating markup in a loop, each element created (in this case, the<li>element) should have akeyprop with a unique value assigned to it- in this case, the category primary key id is a convenient and appropriate value to assign to it.This is just a warning- the site is still working, but this is an important PERFORMANCE optimization for React components. When repeated elements have a unique key prop, React can watch those ids to know when an element is added or removed. Without it, React just sees a bunch of duplicate elements created in a loop, and therefore has to potentially destroy and re-create every element each time the loop gets run.