1

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.

ninsau
  • 518
  • 2
  • 5
  • 18

2 Answers2

2

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>
    );
  })}
Mik378
  • 21,881
  • 15
  • 82
  • 180
1

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.

Peter B
  • 22,460
  • 5
  • 32
  • 69