I'm trying provide uuidv4 as key prop in my header list item but it gives me warning and asking unique key as prop

Question

// This is my routes which I'm trying to map through 
const Header = () => {
  const routes = [
    { id: 1, name: 'Home', link: '/' },
    { id: 2, name: 'Blogs', link: '/blogs' },
    { id: 3, name: 'Contact', link: '/about' }
  ];
//Since providing index as key prop is not good I'm giving uuidv4() as key prop
 {
                routes.map(route =>
                  <li className='mr-8'>
                    <NavLink className='px-2' style={navLinkStyles} key={uuidv4()} to={route.link}>{route.name}</NavLink>
                  </li>
                )
              }

This is what I got as warning in my console:

react_devtools_backend.js:3973 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.
    at li
    at Header (http://localhost:3000/static/js/bundle.js:3874:98)
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:90278:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:89087:5)

Proving index as key prop give same warning and uuidv4() also. What should I give as key prop in this case?

Answer 1

Your routes have IDs, which look to be unique identifiers for a particular route (link would probably work too), so use that. Don't use uuid (or Math.random) as a key (unless you really have no other way to identify an element being mapped over), and put the key on the element directly returned from the callback.

routes.map(route =>
    <li className='mr-8' key={route.id}>
        <NavLink className='px-2' style={navLinkStyles} to={route.link}>{route.name}</NavLink>
    </li>
)