Understanding unique keys for array children in React js

Question

I m building a React component that accepts a JSON data source and creates a sortable table  Each of the dynamic data rows has a unique key assigned to it but I m still getting an error of       Each child in an array should have a unique  key  prop    Check the render method of TableComponent    My TableComponent render method returns    lt table gt     lt thead key  thead  gt       lt TableHeader columns  columnNames   gt     lt  thead gt     lt tbody key  tbody  gt        rows      lt  tbody gt   lt  table gt    The TableHeader component is a single row and also has a unique key assigned to it   Each row in rows is built from a component with a unique key    lt TableRowItem key  item id  data  item  columns  columnNames   gt    And the TableRowItem looks like this   var TableRowItem   React createClass     render  function          var td   function             return this props columns map function c              return  lt td key  this props data c   gt  this props data c   lt  td gt              this           bind this        return          lt tr gt   td this props item    lt  tr gt                  What is causing the unique key prop error

User · Answer

I had a unique key  just had to pass it as a prop like this   lt CompName key  msg  id  message  msg    gt   This page was helpful  https   reactjs org docs lists-and-keys html keys

User · Answer

Best solution of define unique key in react  inside the map you initialized the name post then key define by key  post id  or in my code you see i define the name item then i define key by key  item id     x000D   x000D   lt div className  container  gt  x000D                   posts map item   gt   x000D   x000D                       lt div className  card border-primary mb-3  key  item id  gt  x000D                           lt div className  card-header  gt  item name  lt  div gt  x000D                       lt div className  card-body   gt  x000D                   lt h4 className  card-title  gt  item username  lt  h4 gt  x000D                   lt p className  card-text  gt  item email  lt  p gt  x000D                       lt  div gt  x000D                     lt  div gt  x000D                      x000D               lt  div gt  x000D   x000D   x000D

User · Answer

Warning  Each child in an array or iterator should have a unique  key  prop   This is a warning as for array items which we are going to iterate over will need a unique resemblance   React handles iterating component rendering as arrays   Better way to resolve this is provide index on the array items you are going to iterate over for example    class UsersState extends Component               state                 users                     name  shashank   age 20                    name  vardan   age 30                    name  somya   age 40                              render                         return                       lt div gt                                                        this state users map  user  index   gt                                   return  lt UserState key  index  age  user age  gt  user name  lt  UserState gt                                                                                lt  div gt                                index is React built-in props

User · Answer

I was running into this error message because of  lt  gt  lt   gt  being returned for some items in the array when instead null needs to be returned

User · Answer

var TableRowItem   React createClass     render  function          var td   function             return this props columns map function c  i              return  lt td key  i  gt  this props data c   lt  td gt              this           bind this        return          lt tr gt   td this props item    lt  tr gt                  This will sove the problem

User · Answer

This is a warning  But addressing this will make Reacts rendering much FASTER   This is because React needs to uniquely identify each items in the list  Lets say if the state of an element of that list changes in Reacts Virtual DOM then React needs to figure out which element got changed and where in the DOM it needs to change so that browser DOM will be in sync with the Reacts Virtual DOM   As a solution just introduce a key attribute to each li tag  This key should be a unique value to each element

User · Answer

Just add the unique key to the your Components   data map  marker   gt       return           lt YourComponents              key  data id          lt ----- unique key           gt

User · Answer

You should add a key to each child as well as each element inside children   This way React can handle the minimal DOM change    In your code  each  lt TableRowItem key  item id  data  item  columns  columnNames   gt  is trying to render some children inside them without a key   Check this example   Try removing the key  i  from the  lt b gt  lt  b gt  element inside the div s  and check the console    In the sample  if we don t give a key to the  lt b gt  element and we want to update only the object city  React needs to re-render the whole row vs just the  element    Here is the code   var data     name  Jhon   age 28  city  HO                 name  Onhj   age 82  city  HN                 name  Nohj   age 41  city  IT                  var Hello   React createClass        render  function            var  data   this props info        console log  data         return           lt div gt                data map function object  i                  return  lt div className   row   key  i  gt                                object name                                   remove the key                               lt b className  fosfo  key  i  gt   object city   lt  b gt                                  object age                                                     lt  div gt                              lt  div gt                       React render  lt Hello info  data    gt   document body     The answer posted by  Chris at the bottom goes into much more detail than this answer   Please take a look at https   stackoverflow com a 43892905 2325522  React documentation on the importance of keys in reconciliation  Keys

User · Answer

This may or not help someone  but it might be a quick reference  This is also similar to all the answers presented above  I have a lot of locations that generate list using the structure below  return        myList map item   gt            lt  gt             lt div class  quot some class quot  gt                 item someProperty                                 lt  div gt          lt   gt                        After a little trial and error  and some frustrations   adding a key property to the outermost block resolved it  Also  note that the  lt  gt  tag is now replaced with the  lt div gt  tag now  return           myList map  item  index    gt            lt div key  index  gt             lt div class  quot some class quot  gt                 item someProperty                                 lt  div gt          lt  div gt              Of course  I ve been naively using the iterating index  index  to populate the key value in the above example  Ideally  you d use something which is unique to the list item

User · Answer

Be careful when iterating over arrays   It is a common misconception that using the index of the element in the array is an acceptable way of suppressing the error you are probably familiar with  Each child in an array should have a unique  quot key quot  prop   However  in many cases it is not  This is anti-pattern that can in some situations lead to unwanted behavior   Understanding the key prop 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  That being said  one does not always need to apply the above  provided it is known that the array is completely static  However  applying best practices is encouraged whenever possible  A React developer said in this GitHub issue    key is not really about performance  it s more about identity  which in turn leads to better performance   randomly assigned and changing values are not identity We can t realistically provide keys  automatically  without knowing how your data is modeled  I would suggest maybe using some sort of hashing function if you don t have ids We already have internal keys when we use arrays  but they are the index in the array  When you insert a new element  those keys are wrong    In short  a key should be   Unique - A key cannot be identical to that of a sibling component  Static - A key should not ever change between renders    Using the key prop As per the explanation above  carefully study the following samples and try to implement  when possible  the recommended approach   Bad  Potentially   lt tbody gt       rows map  row  i    gt            return  lt ObjectRow key  i    gt            lt  tbody gt   This is arguably the most common mistake seen when iterating over an array in React  This approach isn t technically  quot wrong quot   it s just     quot dangerous quot  if you don t know what you are doing  If you are iterating through a static array then this is a perfectly valid approach  e g  an array of links in your navigation menu   However  if you are adding  removing  reordering or filtering items  then you need to be careful  Take a look at this detailed explanation in the official documentation   x000D   x000D  class MyApp extends React Component     constructor         super        this state           arr    Item 1                  click        gt        this setState         arr    Item      this state arr length 1   concat this state arr                    render         return         lt div gt           lt button onClick  this click  gt Add lt  button gt           lt ul gt             this state arr map               item  i    gt   lt Item key  i  text   Item     i  gt  item        lt  Item gt                        lt  ul gt         lt  div gt                const Item    props    gt      return        lt li gt         lt label gt  props children  lt  label gt         lt input value  props text    gt       lt  li gt          ReactDOM render  lt MyApp   gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt   lt div id  app  gt  lt  div gt  x000D   x000D   x000D   In this snippet we are using a non-static array and we are not restricting ourselves to using it as a stack  This is an unsafe approach  you ll see why   Note how as we add items to the beginning of the array  basically unshift   the value for each  lt input gt  remains in place  Why  Because the key doesn t uniquely identify each item  In other words  at first Item 1 has key  0   When we add the second item  the top item becomes Item 2  followed by Item 1 as the second item  However  now Item 1 has key  1  and not key  0  anymore  Instead  Item 2 now has key  0    As such  React thinks the  lt input gt  elements have not changed  because the Item with key 0 is always at the top  So why is this approach only sometimes bad  This approach is only risky if the array is somehow filtered  rearranged  or items are added removed  If it is always static  then it s perfectly safe to use  For example  a navigation menu like   quot Home quot    quot Products quot    quot Contact us quot   can safely be iterated through with this method because you ll probably never add new links or rearrange them  In short  here s when you can safely use the index as key   The array is static and will never change  The array is never filtered  display a subset of the array   The array is never reordered  The array is used as a stack or LIFO  last in  first out   In other words  adding can only be done at the end of the array  i e push   and only the last item can ever be removed  i e pop    Had we instead  in the snippet above  pushed the added item to the end of the array  the order for each existing item would always be correct   Very bad  lt tbody gt       rows map  row    gt            return  lt ObjectRow key  Math random      gt            lt  tbody gt   While this approach will probably guarantee uniqueness of the keys  it will always force react to re-render each item in the list  even when this is not required  This a very bad solution as it greatly impacts performance  Not to mention that one cannot exclude the possibility of a key collision in the event that Math random   produces the same number twice   Unstable keys  like those produced by Math random    will cause many component instances and DOM nodes to be unnecessarily recreated  which can cause performance degradation and lost state in child components    Very good  lt tbody gt       rows map  row    gt            return  lt ObjectRow key  row uniqueId    gt            lt  tbody gt   This is arguably the best approach because it uses a property that is unique for each item in the dataset  For example  if rows contains data fetched from a database  one could use the table s Primary Key  which typically is an auto-incrementing number    The best way to pick a key is to use a string that uniquely identifies a list item among its siblings  Most often you would use IDs from your data as keys   Good componentWillMount       let rows   this props rows map item   gt         return  uid  SomeLibrary generateUniqueID    value  item                  lt tbody gt       rows map  row    gt            return  lt ObjectRow key  row uid    gt            lt  tbody gt   This is also a good approach  If your dataset does not contain any data that guarantees uniqueness  e g  an array of arbitrary numbers   there is a chance of a key collision  In such cases  it is best to manually generate a unique identifier for each item in the dataset before iterating over it  Preferably when mounting the component or when the dataset is received  e g  from props or from an async API call   in order to do this only once  and not each time the component re-renders  There are already a handful of libraries out there that can provide you such keys  Here is one example  react-key-index

User · Answer

In ReactJS if you are rendering an array of elements you should have a unique key for each those elements  Normally those kinda situations are creating a list  Example  function List       const numbers    0 1 2 3       return        lt ul gt  numbers map  n    gt   lt li gt   n   lt  li gt    lt  ul gt           ReactDOM render     lt List   gt     document getElementById  root       In the above example  it creates a dynamic list using li tag  so since li tag does not have a unique key it shows an error  After fixed  function List       const numbers    0 1 2 3       return        lt ul gt  numbers map  n    gt   lt li key  n  gt   n   lt  li gt    lt  ul gt           ReactDOM render     lt List   gt     document getElementById  root       Alternative solution when use map when you don t have a unique key  this is not recommended by react eslint    function List       const numbers    0 1 2 3 4 4       return        lt ul gt  numbers map  n i    gt   lt li key  i  gt   n   lt  li gt    lt  ul gt           ReactDOM render     lt List   gt     document getElementById  root       Live example  https   codepen io spmsupun pen wvWdGwG

User · Answer

Check  key   undef      You got also the warn message   Each child in a list should have a unique  key  prop    if your code is complete right  but if on   lt ObjectRow key  someValue    gt    someValue is undefined    Please check this first  You can save hours

User · Answer

I fixed this using Guid for each key like this  Generating Guid   guid         return this s4     this s4      -    this s4      -    this s4      -            this s4      -    this s4     this s4     this s4       s4         return Math floor  1   Math random      0x10000           toString 16           substring 1       And then assigning this value to markers    this state markers map marker   gt                   lt MapView Marker                   key  this guid                      coordinate  marker coordinates                    title  marker title                  gt

User · Answer

When you don   t have stable IDs for rendered items  you may use the item index as a key as a last resort  const todoItems   todos map  todo  index    gt     Only do this if items have no stable IDs     lt li key  index  gt         todo text      lt  li gt      Please refer to List and Keys - React

[javascript] Understanding unique keys for array children in React.js

Examples related to javascript

Examples related to reactjs