Explanation for Each child in a list should have a unique key prop in React
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.