Key error when there is already one on Javascript and REACT AXIOS-CodePudding

in my console it displays this: "Warning: Each child in a list should have a unique "key" prop."

can you help me ? thank you

Code : https://paste.artemix.org/-/F-vscq

CodePudding user response：

Every node that is returned from the map function needs to have a key prop:

{ users
  ? users.map((user,topbar, img) => (
    <div className="topBarContainer" key={user}>

CodePudding user response：

Your

 return (
        <Fragment>
            { user
            ? user.map((users,topbar, img) => ( <div className="topBarContainer">
                            <div key={topbar} className="topBarLeft">
                                <span className="logo">Groupomania</span>
                            </div> 
                            <div className="topBarCenter">
                                <div className="searchBar">
                                    <Search className="searchIcon" /> 
                                    <input placeholder="Vous cherchez quelque chose ?" className="searchInput" />
                                </div>
                            </div>
                            <div className="topBarRight">
                                <div className="topBarLinks">
                                    <span className="topBarLink">Page d'acceuil</span>
                                    <span className="topBarLink">TimeLine ? </span>
                                </div>
                                <img key={img} src={users.nom} alt="" className="topBarImg" />
                            </div>
                        </div>))
                    : (<p>coucou</p>)
            }
        </Fragment>
    )

code totally correct.I think your problem should be fetching data and url.Please check axios part and api part of your code.Thanks!