You have an array of React components. You are trying to render it using a loop. While running the application, everything looks good. But in the browser console you see this error:
VM9:85 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
This error message appears only when we use development version of React file. We will not see this error in production.
How to solve this error
The key
issue can be solved by adding a key
attribute to each Array components. Here is an example that renders 3 components from an array.
[<Student key="1" />, <Address key="2" />, <PIN key="3" />];
This is how we need to add the key
to remove the warning.
Why React needs the key
In simple terms, let me see how to put this. Observe the array below with 3 components.
[<Student />, <Address />, <PIN />];
React can render above component. No issue. But if we swap the Address
and PIN
component, React needs to re-render the entire array. If the key
attribute is there, React will keep a record of that. Then it can swap Address
and PIN
without re-rendering Student
component.