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

Question

I'm new with React and I'm blocked here.

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

This warning pops for me every time and I can't find the error.

<TableContainer component={Paper}>
  <Table  aria-label="customized table">
    <TableHead>
      <TableRow>
        <StyledTableCell>Nom parametre</StyledTableCell>
        <StyledTableCell align="right">Type parametre</StyledTableCell>
        <StyledTableCell align="right">Valeur</StyledTableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {Parametres.map((parametre) => (
        <StyledTableRow key={parametre.id_param}>
          <StyledTableCell align="right">
          {parametre.id_param}
          </StyledTableCell>
          <StyledTableCell align="right">{parametre.type_param}</StyledTableCell>
          <StyledTableCell align="right">{parametre.valeur_param}</StyledTableCell>
        </StyledTableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>**strong text**

Answer 1

You're getting that error because in react, if you're looping through data, you must add a key prop to each element. The key must be unique.

In your case, I can see that you have a key prop and getting an error means that the key (which in your case, is parametre.id_params) is not unique.

You have two options here. One is to make sure id.params is unique and the other one is to use the iteration index.

The latter will be easier to implement. It should be something like this.

hould have a unique “key” prop that pop for me every time and i cant find the error

<TableContainer component={Paper}>
  <Table  aria-label="customized table">
    <TableHead>
      <TableRow>
        <StyledTableCell>Nom parametre</StyledTableCell>
        <StyledTableCell align="right">Type parametre</StyledTableCell>
        <StyledTableCell align="right">Valeur</StyledTableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {Parametres.map((parametre, idx) => (
        <StyledTableRow key={idx}>
          <StyledTableCell align="right">
          {parametre.id_param}
          </StyledTableCell>
          <StyledTableCell align="right">{parametre.type_param}</StyledTableCell>
          <StyledTableCell align="right">{parametre.valeur_param}</StyledTableCell>
        </StyledTableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>**strong text**

Hope that helps.

Answer 2

The error that you have is raised by this line

<StyledTableRow key={parametre.id_param}>

Install react dev tool inside your browser Chrome extention

and try to inspect the key of that StyledTableRow you will find that it is the same for all the rendered tags from the mapping function, because when you map through an object each child should have his unique key.

Another alternative that you can use is to use the index of the item instead of a property like that

      {Parametres.map((parametre, index) => (
        <StyledTableRow key={index}>
          <StyledTableCell align="right">
          {parametre.id_param}
          </StyledTableCell>
          <StyledTableCell align="right">{parametre.type_param}</StyledTableCell>
          <StyledTableCell align="right">{parametre.valeur_param}</StyledTableCell>
        </StyledTableRow>
      ))}