Warning Each child in an array or iterator should have a unique key prop Check the render method of ListView

Question

I built an app with ReactNative both for iOS and android with a ListView  When populating the listview with a valid datasource  the following warning is printed at the bottom of the screen      Warning  Each child in an array or iterator should have a unique  key    prop  Check the render method of ListView    What is the purpose of this warning  After the message they link to this page  where complete different things are discussed which have nothing to do with react native  but with web based reactjs   My ListView is built with those statements   render         var store   this props store       return             lt ListView             dataSource  this state dataSource              renderHeader  this renderHeader bind this               renderRow  this renderDetailItem bind this               renderSeparator  this renderSeparator bind this               style  styles listView                gt              My DataSource consists of something like       var detailItems            detailItems push  new DetailItem  plain   store address         detailItems push  new DetailItem  map               if store telefon            detailItems push  new DetailItem  contact   store telefon   Anrufen    fontawesome phone                if store email            detailItems push  new DetailItem  contact   store email   Email    fontawesome envelope                detailItems push  new DetailItem  moreInfo               this setState           dataSource  this state dataSource cloneWithRows detailItems            And the ListView-Rows are rendered with stuff like           return                lt TouchableHighlight underlayColor   dddddd  gt                   lt View style  styles infoRow  gt                       lt Icon                                 name  item icon                                  size  30                                  color  gray                                  style  styles contactIcon                                    gt                       lt View style    flex  1   gt                           lt Text style  styles headline  gt  item headline  lt  Text gt                           lt Text style  styles details  gt  item text  lt  Text gt                       lt  View gt                       lt View style  styles separator   gt                   lt  View gt               lt  TouchableHighlight gt               Everything works fine and as expected  except the warning which seems to be complete nonsense to me   Adding a key-property to my  DetailItem -Class didn t solve the issue   This is  what really will be passed to the ListView as a result of  cloneWithRows     dataBlob   I ReactNativeJS  1293        s1   I ReactNativeJS  1293             key  2  I ReactNativeJS  1293             type   plain   I ReactNativeJS  1293             text   xxxxxxxxxx   I ReactNativeJS  1293             headline      I ReactNativeJS  1293             icon        I ReactNativeJS  1293             key  3  type   map   text      headline      icon        I ReactNativeJS  1293             key  4  I ReactNativeJS  1293             type   contact   I ReactNativeJS  1293             text    xxxx  yyyyyy   I ReactNativeJS  1293             headline   Anrufen   I ReactNativeJS  1293             icon   fontawesome phone     I ReactNativeJS  1293             key  5  I ReactNativeJS  1293             type   contact   I ReactNativeJS  1293             text   xxxxxxxxx hotmail com   I ReactNativeJS  1293             headline   Email   I ReactNativeJS  1293             icon   fontawesome envelope     I ReactNativeJS  1293             key  6  type   moreInfo   text      headline      icon              As one key see  each record has a key property  The warning still exists

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 MyComponent key  someValue    gt    someValue is undefined    Please check this first  You can save hours

User · Answer

This warning comes when you don t add a key to your list items As per react js Docs -     Keys help React identify which items have changed  are added  or are   removed  Keys should be given to the elements inside the array to give   the elements a stable identity    const numbers    1  2  3  4  5   const listItems   numbers map  number    gt     lt li key  number toString    gt       number     lt  li gt          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    const todoItems   todos map  todo    gt     lt li key  todo id  gt       todo text     lt  li gt          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

User · Answer

I ve had exactly the same problem as you for a while now  and after looking at some of the suggestions above  I finally solved the problem   It turns out  at least for me anyway   I needed to supply a key  a prop called  key   to the component I am returning from my renderSeparator method  Adding a key to my renderRow or renderSectionHeader didn t do anything  but adding it to renderSeparator made the warning go away   Hope that helps

User · Answer

Here is based on my understanding  Hopefully it s helpful  It s supposed to render a list of any components as the example behind  The root tag of each component needs to have a key  It doesn t have to be unique  It cannot be key 0  key  0   etc  It looks the key is useless   render         return             lt div key  0  gt  div 0 lt  div gt              lt div key  1  gt  div 2 lt  div gt              lt table key  2  gt  lt tbody gt  lt tr gt  lt td gt  table  lt  td gt  lt  tr gt  lt  tbody gt  lt  table gt              lt form key  3  gt  form  lt  form gt

User · Answer

The thing that tripped me up on this problem was that I thought that the need for a key applied to what looks like  real  or DOM HTML elements as opposed to JSX elements that I have defined   Of course with React we are working with a virtual DOM so the React JSX elements we define  lt MyElement gt  are just as important to it as the elements that look like real DOM HTML elements like  lt div gt    Does that make sense

User · Answer

Seems like both the conditions are met  perhaps key  contact   is the issue    if store telefon        detailItems push  new DetailItem  contact   store telefon   Anrufen    fontawesome phone        if store email        detailItems push  new DetailItem  contact   store email   Email    fontawesome envelope

User · Answer

In my case  I was using the Semantic UI React  Card  view   Once I added a key to each card I constructed  the warning went away  for example   return            lt Card fluid key   message-results-card   gt                         lt  Card gt

User · Answer

Assuming the renderDetailItem method has the following signature      rowData  sectionID  rowID  highlightRow     Try doing this      lt TouchableHighlight key  rowID  underlayColor   dddddd  gt

User · Answer

You need to provide a key   Try doing this in your ListView Rows if you have a key property    lt TouchableHighlight key  item key  underlayColor   dddddd  gt    If not  try just adding the item as the key    lt TouchableHighlight key  item  underlayColor   dddddd  gt

User · Answer

Add a prop  key  to the rendering root component of the list    lt ScrollView gt         lt List gt             this state nationalities map  prop  key    gt                 return                   lt ListItem key  key  gt                     lt Text gt  prop name  lt  Text gt                  lt  ListItem gt                                       lt  List gt   lt  ScrollView gt

User · Answer

I fixed it by add a property to renderSeparator Component the code is here    renderSeparator sectionID rowID       return            lt View style  styles separatorLine  key   sectionID   sectionID   rowID   rowID  gt  lt  View gt             The key words of this warning is  unique   sectionID   rowID return a unique value in ListView

User · Answer

Change your code from   render         return          lt ol gt           this props results map  result    gt               lt li gt  result text  lt  li gt                     lt  ol gt             To     render         return          lt ol gt           this props results map  result    gt               lt li key  result id  gt  result text  lt  li gt                     lt  ol gt             Then solved

User · Answer

You can also use the iteration count  i  as the key   render         return          lt ol gt           this props results map  result  i    gt               lt li key  i  gt  result text  lt  li gt                     lt  ol gt

User · Answer

This cannot be emphasized enough    Keys only make sense in the context of the surrounding array     For example  if you extract a ListItem component  you should keep the key on the  lt ListItem   gt  elements in the array rather than on the  lt li gt  element in the ListItem itself   -- https   reactjs org docs lists-and-keys html extracting-components-with-keys

User · Answer

The specific code I used to fix this was     renderSeparator sectionID  rowID  adjacentRowHighlighted        return          lt View style  styles separator  key     sectionID -  rowID     gt              I m including the specific code because you need the keys to be unique--even for separators  If you do something similar e g   if you set this to a constant  you will just get another annoying error about reuse of keys  If you don t know JSX  constructing the callback to JS to execute the various parts can be quite a pain   And on the ListView  obviously attaching this    lt ListView   style  styles listview    dataSource  this state dataSource    renderRow  this renderRow bind this     renderSeparator  this renderSeparator bind this     renderSectionHeader  this renderSectionHeader bind this    gt    Credit to coldbuffet and Nader Dabit who pointed me down this path

User · Answer

If you re using the  lt Fade in gt  element for a react application please add key    attribute in it as well or you ll see an error in the console

[facebook] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`

Examples related to facebook

Examples related to listview

Examples related to reactjs

Examples related to react-native