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

Published on Friday, 27 November 2020.
At 104 words, this article should take about 1 minute to read.
This article is more than 2 years old.

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 reasons^{1, 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).

¹ React Docs say so

² Stack Overflow Bros say so

Fin

onward-journeys module