0

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?

enter image description here

enter image description here

2 Answers 2

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.

2
  • Thank You! Fixed the issue and I appreciate your explanation.
    – Debug
    Commented Jun 15, 2021 at 23:26
  • 1
    @Debug you can mark that accepted, it will save me and everyone else time.
    – Aditya
    Commented Jun 15, 2021 at 23:28
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.