0

Here is the code throwing the error with the console message below:

 <div className="col-12"> <h6>Infractions:</h6> {infractions.map(({ id, itype, dateStamp }) => ( <li key={id} className="col-12"> {itype} {dateStamp} </li> ))} </div>

and the error

enter image description here

Improve this question
3
  • It may be because id you are getting may not be unique Commented Mar 25, 2021 at 9:42
  • The Id is unique, it is generated by uuid Commented Mar 25, 2021 at 10:07
  • Could your infractions list can have duplicate infraction ? Commented Mar 25, 2021 at 10:58

1 Answer 1

Reset to default
2

The error you are seeing is because the keys you have set are not unique, or undefined.

From what you have answered in the comments, you are using some kind of UUID to generate said id values. Since you haven't included that code in your question, you should probably verify the following:

  • The UUIDs you are generating are indeed unique, and you are not accidentally reusing them or setting the same UUID for all records.

  • The id field is always populated and React doesn't render the list with the values still undefined

To check both those suggestions, and any further investigations you may need, you have a variety of tools available.

  • You can use console.log and output the values to the terminal (it's not the cleanest approach, but it gives quick results)

  • You can also show the ID in the component, and see what's going on:

<li key={id} className="col-12"> (ID: {id}) - {itype} {dateStamp} </li>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks I got it working - Each ID was fine, and unique. I had to set up each each each 'infraction' object with empty data first...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.