Warning: Each child in a list should have a unique “key” prop.

David Zhao
Jul 23, 2021

--

Material UI⁴.11, React¹⁷.0.2, Created at July 21, 2021, Read Series…

React uses the key prop to understand the component-to-DOM Element relation, which is then used for the reconciliation process. It is therefore very important that the key always remains unique, otherwise there is a good chance React will mix up the elements and mutate the incorrect one. It is also important that these keys remain static throughout all re-renders in order to maintain best performance.

/* Fix of Warning: Each child in a list should have a unique "key" prop. in App.tsx */<React.Fragment key={lng}>
{lng},
</React.Fragment>
Or/* Fix of Warning: Each child in a list should have a unique "key" prop. in LodashGroupByList.tsx */<AccordionDetails key={item.key}>
...
</AccordionDetails>

Github commits is here: Basic-1.13. 2 Popular React Warnings

--

--

David Zhao

Expert on .Net, React, React Native . Professional on Asp.Net Mvc/Web Api, C#, React, Typescript, Maui, Html, Css, Sql Server/Oracle.