Skip to content
A error message in React console

Each child in a list should have a unique "key" prop

Friday, 27 November 2020

At 123 words, this article should take about 1 minute to read.

This article is more than a year old and the information in it may be out of date.

To prevent ugly errors in your console when you loop through an array, React likes you to use a unique key for each child element.

We usually use the loop index. This is not advised for several reasons1, 2.

Instead try this…

Math.random().toString(36).substr(2, 9)

This will give you a (fairly) random 9-character alphanumerical string.

Example code
<ul>
    { items.map(x => <li key={ Math.random().toString(36).substr(2, 9) }>{x}</li> }
</ul>

This is useful for "throwaway" keys. If you're going to be referencing the keys in any way, you need to use a unique property (like an ID or slug).


1 React Docs say so

2 Stack Overflow Bros say so


Fin

Comments

In almost all cases, the comments section is a vile cesspool of Reply Guys, racists, and bots.

I don't want to have to deal with that kind of hell so I don't have a comments section.

If you want to continue the conversation, you can always hit me up on Mastodon (which is not a vile cesspool of Reply Guys, racists, and bots).

Thomas Rigby

Thomas Rigby

When I'm not building things for the internet, I take photos of stuff.

Pronouns: he/him/his

Real. Simple. Syndication.

Get my latest content in your favorite RSS reader. I use InoReader but you don't have to.

What even is an RSS feed?!

Subscribe

Last played

Burn the Bitch

Ulver || Svidd Neger

Listen
Loading Invisible Visible RSS Navigation Close Arrow Info Online Online