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

Question

I have such jsx:

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map(person =>
      <Grid.Column key={person.id}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

const GamePage = React.memo(({ peopleList }) => {
  const randomPeopleList = getNRandomItems(peopleList, 6)
  
  const topRow = randomPeopleList.slice(0, 3)
  const bottomRow = randomPeopleList.slice(3)
  const personToFind = getRandomItem(randomPeopleList)
  
  return (
    <Grid>
      <RowComponent rowList={topRow} personToFind={personToFind} />
      <RowComponent rowList={bottomRow} personToFind={personToFind} />
    </Grid>
  ) 
})

The error says to Check the render method of RowComponent. I tried putting key on Grid.Row, RowComponent and ImageComponent (and Image that is within it). Nothing of that is working, so I am confused as to where should I put key. According to the thread:

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

It should be outermost element, but I put it on the outermost Grid.Row, RowComponent itself and it still shows.. I verified that person.id is unique id.

Update

There are two errors of the same type. The first one is:

I eliminated it by generating key differently for the Grid.Column:

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map((person, idx) =>
      <Grid.Column key={`column-${idx}-img-${person.id}`}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

I don't understand why this is needed though since each person.id is unique. Another error still persists:

It must be on the outermost element __of the array__ you're generating, this is `Grid.Column` in your case. — tkausl, Nov 11 '21 at 08:02
You placed your key correctly. There is probably another component that you forgot to add a key to. Search for ".map(" and check if all mapped outermost components have the key defined — SlothOverlord, Nov 11 '21 at 08:23
Just updated the ticket. Tried `Math.random()` on `Image` and `ImageComponent` - not working. — Nikita Vlasenko, Nov 11 '21 at 12:02
Never use `Math.random()` with a key or you’ll get very bad react performance. If you don’t have a unique id for each element, at worst, use an increased index. — Stéphane Veyret, Nov 11 '21 at 12:14
Its just for testing, to guarantee that its unique. Of course, I am always trying to use some key that is relevant to my current UI. — Nikita Vlasenko, Nov 11 '21 at 12:34

score 1 · Answer 1 · answered Mar 07 '22 at 20:26

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map((person,index) =>
      <Grid.Column key={person.id+""+index}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

const GamePage = React.memo(({ peopleList }) => {
  const randomPeopleList = getNRandomItems(peopleList, 6)
  
  const topRow = randomPeopleList.slice(0, 3)
  const bottomRow = randomPeopleList.slice(3)
  const personToFind = getRandomItem(randomPeopleList)
  
  return (
    <Grid>
      <RowComponent rowList={topRow} personToFind={personToFind} />
      <RowComponent rowList={bottomRow} personToFind={personToFind} />
    </Grid>
  ) 
})

{rowList.map((person,index) =>
      <Grid.Column key={person.id+" "+index}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }

The reason behind using key={person.id+" "+index} is , key should be as much unique as it can be . what if you have same person.id with two or more child ? To handle such test cases , we are doing that key = {person.id+" "+index}

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

1 Answers1