How can I get rid of this warning. I hate seeing it in the console. I feel I'm doing everything right but I keep getting this warning. This is what I'm doing:
{reviews.map((review, i) => {
return (
<>
<sl-details summary={`${review.name}`} key={i} open>
<p>{review.review}</p>
</sl-details>
<br />
</>
);
})}
I don't know if the stack is of any relevance but I'm using Nextjs and shoelace.
You didn't position your key on the first node within your map's callback.
Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments
Checkout the very last section of that page.
So your code should become:
{reviews.map((review, i) => {
return (
<React.Fragment key={i}>
<sl-details summary={`${review.name}`} open>
<p>{review.review}</p>
</sl-details>
<br />
</React.Fragment>
);
})}
The key={i} should be put on the outer <></> elements, and for that to be possible, you need to convert them to full <Fragment> elements.
Updated code:
{reviews.map((review, i) =>
<Fragment key={i}>
<sl-details summary={`${review.name}`} open>
<p>{review.review}</p>
</sl-details>
<br />
</Fragment>
)}
PS I also shortened it to not use the unneeded return.