列表中的每个孩子都应该有一个唯一的“钥匙”道具 Reactjs

Question

I am working on Nextjs/Reactjs i am fetching data after click on button but in my console i am getting following error

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

Here is my current code ( data is displaying with id and title)(

<button onClick={fetchReviewsFromServer}>Load Reviews From Server</button>
                        {
                            reviewfromserver.map(reviewnew=>{
                                return(
                                    <>
                                       <div key={reviewnew.id}> // not working
                                            <div>{reviewnew.id}- {reviewnew.title} </div>
                                       </div>

                                    </>
                                )
                            })
                        }

Answer 1

The child in your list is the empty <> element, I don't see a need for it regardless, since you only have one child element to that element .

<button onClick={fetchReviewsFromServer}>Load Reviews From Server</button>
{
    reviewfromserver.map(reviewnew=>{
        return(
            <div key={reviewnew.id}> // not working
                <div>{reviewnew.id}- {reviewnew.title} </div>
            </div>
        )
    })
}

Answer 2

That's because the fragmets are items. Remove them, you don't need them anyway.