Semantic UI React -- Can't Set Key Property on Table Row

Question

I'm displaying a list of results from an API in a Table using Semantic UI React.

The table displays correctly but getting the following error:

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

I'm mapping an array and displaying like so:

 <Table.Row key={card.id}>

When i look at the html results, there is no key in the TR.

if i change the table row to id={card.id} or any other variable, the results show, but not key

Is there something different i need to do with Semantic UI? I didn't see anything in the documentation.

Answer 1

I figured this out. Posting for anyone that might have a similar issue.

I have a React Fragment right before the Table Row and figured out that it also needs a key. Thus, this was solved by doing the following:

 <React.Fragment key={card.id}>
              <Table.Row key={card.id}>