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

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

Ive 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 didnt do anything, but adding it to renderSeparator made the warning go away.

Hope that helps.

You need to provide a key.

Try doing this in your ListView Rows if you have a key property:

<TouchableHighlight key={item.key} underlayColor=#dddddd>

If not, try just adding the item as the key:

<TouchableHighlight key={item} underlayColor=#dddddd>

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

You can also use the iteration count (i) as the key:

render() {
    return (
      <ol>
        {this.props.results.map((result, i) => (
          <li key={i}>{result.text}</li>
        ))}
      </ol>
    );
}