CODEWITHSUNDEEP
reactjs
Gonsa02
Gonsa02

Reputation: 351

ReactJS Each child in a list should have a unique "key" prop doesn't work

Hi I'm doing a map of an information sent from backend and I'm assigning a unique key value to every table entry but I still reciving this error.

enter image description here

Here is the map function:

{trainees.map((trainee) => (
                <tr key={trainee.trainee_id}>
                  <td>{trainee.username}</td>
                  <td>{trainee.email}</td>
                  <td>{trainee.next_preparation}</td>
                  <td>
                    <Button>
                      <AiFillEye color="blue" fontSize="30px" />
                    </Button>
                  </td>
                  <td>
                    <Button>
                      <AiOutlineUpload color="yellow" fontSize="30px" />
                    </Button>
                  </td>
                </tr>
              ))}

I'm sure that trainee_id is unique. So I don't know what's wrong, if anyone know it, let me know. Thanks!

Upvotes: 0

Views: 43

Answers (1)

Akash
Akash

Reputation: 103

Assuming trainee_id is unique, there must be some typo in this causing key to be undefined in every case. Just for reference, this is tested in this fiddle. https://jsfiddle.net/ekxhqdvy/

const arr = [1, 2, 3];
return arr.map((no, index) => {
  return <span key={undefined}>{no}</span>
})

Upvotes: 1

Related Questions