CODEWITHSUNDEEP
javascriptreactjs
Ferg
Ferg

Reputation: 1

React app throwing error about key, but I have already assigned a unique key at the top level

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

Upvotes: 0

Views: 857

Answers (1)

Jorge
Jorge

Reputation: 1634

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>

Upvotes: 2

Related Questions