
Friday, 27 November 2020
At 235 words, this article should take about 1 minute to read.
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.

<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
).
Comments
In almost all cases, the comments section is a 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 Twitter (which is, in it's own way, a vile cesspool of Reply Guys, racists, and bots).