Error react-jsx-dev-runtime.development.js:97 Warning: Each child in a list should have a unique "key" prop

Question

I'm telling everyone I'm putting together my first react and I'm using the materialize css to make the structure, but I did it with class and not as an arrow function, now I'm modifying it, I have the following problem I'm putting together the navbar with routes occupying the library rail-routes-dom but it gives me that error how can I remove it, and how can I build the hamburger menu, I had it running but it was built as a class. if you can help me thanks

import React from 'react';
import 'materialize-css/dist/css/materialize.css';
import logo from '../MKY.png';
import Cart from './CartWidget';
import { Link, NavLink} from 'react-router-dom';

const Navbar = () => { 

  const categories = [
    { name: "electronics", id: 0, route: "/category/electronics" },
    { name: "jewelery", id: 1, route: "/category/jewelery" },
    { name: "men's clothing", id: 2, route: "/category/men's clothing" },
    { name: "women's clothing", id: 3, route: "/category/women's clothing" },
  ];

   return (
      <>
        <nav className='navMKY'>
          <div className='nav-wrapper'>
            <Link to='/' className='brand-logo'><img src={logo} className="App-logo2" alt="logo" /></Link>
            <Link to="#!" data-target="mobile-demo" className='sidenav-trigger'><i className='material-icons'>menu</i></Link>
            <ul className='right hide-on-med-and-down'>
              <li><Link to="/">Index</Link></li>
              {
                categories.map((category) => <li><NavLink key={categories.id} to={categories.route}>{categories.name}</NavLink></li>)
              }
              <li><Link to="/cart"> <Cart NumberSell={5}/></Link></li>
            </ul>
          </div>
        </nav>

        <ul className='sidenav red ' id="mobile-demo">
          <Link to='/' className='brand-logo'><img src={logo} className="App-logo2" alt="logo" /></Link>
          <li><Link to="/">Index</Link></li>
            {
            categories.map((category) => <li><NavLink key={categories.id} to={categories.route}>{categories.name}</NavLink></li>)
            }
            <li><Link to="/cart"> <Cart NumberSell={5}/></Link></li>
        </ul>
      </>
    );
  }
  export default Navbar;

Answer 1

The React key should be on the outermost element being mapped, and should reference the data from the current array being mapped.

Example:

categories.map((category) => (
  <li key={category.id}> // <-- React key here, from category
    <NavLink to={category.route}>
      {category.name}
    </NavLink>
  </li>
))