1

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**
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Khaled Abdelmoumen
  • 27
  • 1
  • 8
  • Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) – Emile Bergeron May 20 '20 at 03:37

2 Answers2

2

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.

<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>
Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
Suraj Auwal
  • 322
  • 3
  • 9
  • I always check any incoming data. So if i were you, I will console.log parametre and see if the data's coming in as expected. – Suraj Auwal May 20 '20 at 14:46
1

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>
      ))}
Farhani Walid
  • 927
  • 1
  • 9
  • 20