Each child in a list should have a unique key prop

This is a React disaster, because I can spend countless hour on this (well-known!), but simple bug :

“Each child in a list should have a unique ‘key’ prop.”

Wait, wait, wait… I already googled around and it seems so easy to fix!

I had already set a unique key on every element in my list!

Who’s in charge? Who’s guilty?

Undefined data when initializing my component.

Yup.

Here’s what was happening:

1. My server component was loading data
2. Before loading, my state was undefined
3. My PlotMap was trying to map over undefined
4. React threw the key error

The solution was simple but so easy to miss

Check my data before passing it to my component!

This simple conditional rendering fixed everything.

Always make sure your data exists before using it!

// This is wrong, causing an error
<PlotMap data={data}>

// Fixed!
{data && <PlotMap data={data}>}