empty ImmutableVirtualizedList always generates a missing key prop warning
See original GitHub issueversion: 0.6.2
If my ImmutableVirtualizedList is empty, I will see this warning:
ExceptionsManager.js:73 Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `VirtualizedList`. See https://fb.me/react-warning-keys for more information.
in CellRenderer (at VirtualizedList.js:499)
in VirtualizedList (at ImmutableVirtualizedList.js:109)
in ImmutableVirtualizedList (at EmptyVirtualizedList.js:76)
in EmptyVirtualizedList (at ImmutableVirtualizedList.js:102)
in ImmutableVirtualizedList (at CpTeamList.js:19)
in RCTView (at View.js:113)
in View (at CpTeamList.js:18)
in CpTeamList (at CtTeamList.js:58)
I’ve tried implementing my own renderEmptyInList
that provides a key on the rendered component, but the warning remains.
Code:
render() {
return (
<View style={styles.container}>
<ImmutableVirtualizedList
immutableData={List()}
ItemSeparatorComponent={this.renderSeparator}
keyExtractor={(item) => item.get("id")}
/*renderEmptyInList={this.renderEmptyInList}*/
renderItem={this.renderItem}
/>
</View>
)
}
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Getting key prop warning in React, even though key is set
My understanding of that has always been that if you are iterating over component that generates HTML, the key should be on the...
Read more >Warning: Each Child in a List Should Have a Unique 'key' Prop
When creating a list in the UI from an array with JSX, you should add a key prop to each child and to...
Read more >Why React needs a key prop | Epic React by Kent C. Dodds
You probably know the solution as well. Here's the rule: Whenever you're rendering an array of React elements, each one must have a...
Read more >Why unfavorable React keys lead to unpredictable behavior
React throws a warning at you if you omit a key. ... Regardless of the actual value, the key value is always [object...
Read more >React key attribute: best practices for performant lists
So what will happen when the CountriesList component re-renders? React will see that there is no “key” there and fall back to using...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@cooperka I found that it was because the data structure was being overwritten, but the keyExtractor wasn’t. So if you had a keyExtractor like
(item) => item.get("id")
that wouldn’t exist on the empty data. I fixed it by overriding keyExtractor in the empty list so that it just returns ‘empty’https://github.com/Jephuff/react-native-immutable-list-view/commit/3c8460e009ca93940ee44050796bf24c287229b1
I can make a PR with that change if you’d like
Resolved by https://github.com/cooperka/react-native-immutable-list-view/pull/35.