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.
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.
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
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
PIN without re-rendering