dameon1 / graphql-recipefinderclient Goto Github PK

You'll want to make all React keys unique on the data and not the index. For instance, say you have a collection (array of objects) with 3 objects. Those objects give an accordion menu with states opened and closed.

const ourCollection = [{ name: "Fluffykins"}, {name: "Fido"}, {name: "Carl"}]

In the local component React state, Fluffykins is closed, Fido is open, and Carl is closed.

Now suppose that new data comes in and Fluffykins is removed. What happens to the Accordion?

Expected: Fido open, Carl closed.
What happens when you use indexes for keys: Fido closed, Carl open.

React knows that 1 and 2's keys are the same (0 and 1), so it will simply pass the data into those existing elements.

Does that make sense? There are a host of other bugs that can happen too.