0

yesterday faced the next issue and have no idea how to solve it. As I can see it, all my keys are unique.. Does anyone see a solution here? P.S. I've already read different solutions on a similar problem, but still could not figure out how to make the keys "unique ".

My Navbar.js looks this way:

    import React, { useState } from 'react'
import { MenuItems } from './MenuItems'
import { Button } from "../Button"
import "./Navbar.css"
import { Link } from 'react-router-dom';


function Navbar() {

    // state = {clicked: false}


    const [click, setClick] = useState(false);
    const [button, setButton] = useState(true);

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false);

    const showButton = () => {
        if (window.innerWidth <= 1100) {
            setButton(false);

        } else {
            setButton(true)
        }
    }

Says that the problem is somewhere below here.. Exact error message : Warning: Each child in a list should have a unique "key" prop.

Check the render method of Navbar. See https://reactjs.org/link/warning-keys for more information.




 const navBarItems = (
<ul className={click ? 'nav-menu active' : 'nav-menu'}>


{MenuItems.map((item) => {

    return (
        <div to="" style={{ textDecoration: 'none' }} onClick={closeMobileMenu}>
            <li key={item.id}>
                <a className={item.cName} href={item.url}>
                    {item.title}
                </a>
            </li>
        </div>
    )
})}


</ul>
 )


window.addEventListener('resize', showButton);

return (
    <>
        <nav className="NavbarItems">
            <Link to='/' className="navbar-logo" onClick={closeMobileMenu} >
                <img src="/images/yokifyLogo.svg" alt="" />
            </Link>
            <div className="menu-icon" onClick={handleClick}>

                <i className={click ? 'fas fa-times' : 'fas fa-bars'}></i>

            </div>

            
                 
                <div>
                    {navBarItems}
                </div>
            



            <div className='nav-btn'>
                {button ? (
                    <div>
                        <Link to='/log-in' className='btn-link'>
                            <Button buttonStyle='btn--secondary'>Log in</Button>
                        </Link>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Link to='/sign-up' className='btn-links' id='sign-up'>
                            <Button buttonStyle='btn--primary'>Sign up</Button>
                        </Link>

                    </div>
                ) : (
                        <Link to='/sign-up' className='btn-link' id='log-in'>
                            {/* <Button buttonStyle='btn--mob' buttonSize='btn--mobile'>Sign up</Button> */}
                        </Link>
                    )}


            </div>
        </nav>
    </>
);
// }

}

export default Navbar

Basic JSON file

export const MenuItems = [
    {
        id: 1,
        title: 'Partners',
        url: '/partners',
        cName: 'nav-links'
    },
    {
        id: 2,
        title: 'Contact',
        url: '/contact',
        cName: 'nav-links'
    },
    {
        id: 3,
        title: 'About',
        url: '/about',
        cName: 'nav-links'
    },
    {
        id: 4,
        title: 'Log in',
        url: '/log-in',
        cName: 'nav-links-mobile'
    },
    
];
Maksym Rohovskoi
  • 93
  • 1
  • 8

1 Answers1

3

The key must be in the top level tag

{MenuItems.map((item) => {
    return (
        <div key={item.id} to="" style={{ textDecoration: 'none' }} onClick={closeMobileMenu}>
            <li>
...
hgb123
  • 13,869
  • 3
  • 20
  • 38