React - Each child in a list should have a unique “key” prop

Question

I am working on a React Web Application Where I fetch and display student data from an API and I keep getting the error,

Warning: Each child in a list should have a unique "key" prop. Check the render method of Accordion

Accordion.js being one of my components of my Web Application

Any Help to fix this issue would be appreciated:)

I have tried passing a key prop with an id to the Accordion component from a parent component, but that did not seem to work. Could it be that I need to pass a key in my test score paragraph?

Answer 1

On line 23

Make the following change

<p 

To

<p key={`${i}-stats`}

The issue is simple. React needs to identify each sibling node uniquely and thus it asks you to pass key prop to sibling nodes when returning array or iterating over a lost to return component/view.

Answer 2

It is not recommended to use counter (0, 1, 2...) as your key when populating children.
You should use uuid() or item's self-identifier .