Question 118829 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I have installed uuid, but it does not work

I’m using uuid for providing unique Ids, but I still get this warning:

Each child in a list should have a unique "key" prop.

function NavBar () {
return(
    <ul className='nav justify-content-center'>
        <Link /*to={item.ref}*/ className="nav-link">
            <li className="nav-item" key={uuid()}> Home </li>
        </Link>
        {
            navItems?.map((item) => {
                return(
                    <>
                    <span className="listStyle"></span>
                    <Link to={item.ref} className="nav-link">
                        <li className="nav-item" key={uuid()}> {item.name} </li>
                    </Link>
                    </>
                )
            })
        }
    </ul>
);
}
Tags:

2

Answers


  1. 0

    You should add the key to the outermost element.

    function NavBar() {
    return (
        <ul className='nav justify-content-center'>
            <Link /*to={item.ref}*/ className="nav-link">
                <li className="nav-item" key={uuid()}> Home </li>
            </Link>
            {
                navItems?.map((item) => {
                    return (
                        <>
                            <span key={uuid()}>
                                <span className="listStyle"></span>
                                <Link to={item.ref} className="nav-link">
                                    <li className="nav-item"> {item.name} </li>
                                </Link>
                            </span>
                        </>
                    )
                })
            }
        </ul>
    );
}
    Login or Signup to reply.
  2. 0

    Few issues here.

    Firstly it should be attached to the outermost element.
    Secondly the point of a key is to be stable across renders – this tells React not to remount / recreate the component and instead just to re-render it. (Big performance improvement). You should use something static, such as item.ref. This is because otherwise (as we’re regenerating the items based on the list on every render) React has no way to track them every time it updates the component, this helps resolve that.

    For example:

    function NavBar () {
return(
    <ul className='nav justify-content-center'>
        <Link /*to={item.ref}*/ className="nav-link">
            <li className="nav-item" key={uuid()}> Home </li>
        </Link>
        {
            navItems?.map((item) => {
                return(
                    <span key={item.ref}>
                        <span className="listStyle"></span>
                        <Link to={item.ref} className="nav-link">
                             <li className="nav-item"> {item.name} </li>
                        </Link>
                    </span>
                )
            })
        }
    </ul>
);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search