Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
FacebookListviewReactjsReact NativeFacebook Problem Overview
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 (
<ListView
dataSource={this.state.dataSource}
renderHeader={this.renderHeader.bind(this)}
renderRow={this.renderDetailItem.bind(this)}
renderSeparator={this.renderSeparator.bind(this)}
style={styles.listView}
/>
);
}
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 (
<TouchableHighlight underlayColor='#dddddd'>
<View style={styles.infoRow}>
<Icon
name={item.icon}
size={30}
color='gray'
style={styles.contactIcon}
/>
<View style={{ flex: 1}}>
<Text style={styles.headline}>{item.headline}</Text>
<Text style={styles.details}>{item.text}</Text>
</View>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
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: '[email protected]',
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.
Facebook Solutions
Solution 1 - Facebook
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.
Solution 2 - Facebook
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'>
Solution 3 - Facebook
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>
);
}
Solution 4 - Facebook
Change your code from:
render() {
return (
<ol>
{this.props.results.map((result) => (
<li>{result.text}</li>
))}
</ol>
);
}
To:
render() {
return (
<ol>
{this.props.results.map((result) => (
<li key={result.id}>{result.text}</li>
))}
</ol>
);
}
Then solved.
Solution 5 - Facebook
Add a prop 'key' to the rendering root component of the list.
<ScrollView>
<List>
{this.state.nationalities.map((prop, key) => {
return (
<ListItem key={key}>
<Text>{prop.name}</Text>
</ListItem>
);
})}
</List>
</ScrollView>
Solution 6 - Facebook
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) =>
<li key={number.toString()}>
{number}
</li>
);
> 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) =>
<li key={todo.id}>
{todo.text}
</li>
);
> 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) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
Solution 7 - Facebook
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
<MyComponent key={someValue} />
someValue is undefined!!! Please check this first. You can save hours.
Solution 8 - Facebook
You are getting the same error if you have an empty tag <>
as the top level of your structure inside a loop:
return <select>
{Object.values(countries).map(c => {
return (<> // <== EMPTY TAG!
<option value={c.id}>{c.name}</option>
<States countryId={c.id} />
</>)
}
</select>
You can use full syntax of <React.Fragment>
instead of short <>
and add your key to the full tag:
import {Fragment} from 'react';
return <select>
{Object.values(countries).map(c => {
return (<Fragment key={c.id}> // You can also use <React.Fragment> without import
<option value={c.id}>{c.name}</option>
<States countryId={c.id} />
</Fragment>)
}
</select>
Solution 9 - Facebook
I fixed it by add a property to renderSeparator Component,the code is here:
_renderSeparator(sectionID,rowID){
return (
<View style={styles.separatorLine} key={"sectionID_"+sectionID+"_rowID_"+rowID}></View>
);
}
The key words of this warning is "unique", sectionID + rowID return a unique value in ListView.
Solution 10 - Facebook
Assuming the renderDetailItem method has the following signature...
(rowData, sectionID, rowID, highlightRow)
Try doing this...
<TouchableHighlight key={rowID} underlayColor='#dddddd'>
Solution 11 - Facebook
The specific code I used to fix this was:
renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View style={styles.separator} key={`${sectionID}-${rowID}`}/>
)
}
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:
<ListView
style={styles.listview}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
renderSeparator={this.renderSeparator.bind(this)}
renderSectionHeader={this.renderSectionHeader.bind(this)}/>
Credit to coldbuffet and Nader Dabit who pointed me down this path.
Solution 12 - Facebook
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 [
(<div key={0}> div 0</div>),
(<div key={1}> div 2</div>),
(<table key={2}><tbody><tr><td> table </td></tr></tbody></table>),
(<form key={3}> form </form>),
];
}
Solution 13 - Facebook
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') );
}
Solution 14 - Facebook
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 <ListItem /> elements in the array rather than on the <li> element in the ListItem itself." -- https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys
Solution 15 - Facebook
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 <MyElement>
are just as important to it as the elements that look like real DOM HTML elements like <div>
.
Does that make sense?
Solution 16 - Facebook
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 (
<Card fluid key={'message-results-card'}>
...
</Card>
)
Solution 17 - Facebook
This error comes when you are using any loop function and rendering some HTML element without a key even if your parent div has the key and to fix this you must have to pass the key.
Please check the following screenshot to understand better:
I've fixed this warning following the above-mentioned way.
Solution 18 - Facebook
This worked for me.
<View>
{
array.map((element, index) => {
return(
<React.Fragment key= {`arrayElement${index}`}>
{element}
</React.Fragment>
);
})
}
</View>
Solution 19 - Facebook
If you're using the <Fade in>
element for a react application please add key={}
attribute in it as well or you'll see an error in the console.