I updgraded from react 16.2 -> 16.3-alpha-1 and react-native 0.52->0.54 and I get the warning above in the simulator.
1
-
2I wasn't even using the keyExtractor property, and I got this warning anyway. Had to add this garbage noise to my code to avoid the warning. Bad API.– Andrew KosterCommented Oct 22, 2019 at 2:42
Add a comment
|
3 Answers
To fix the error in any list components where a keyExtractor is in use, update the Component (FlatList etc) to have a string key with .toString(). All keys must now be string values.
Like below;
keyExtractor={item => item.index_id}
to
keyExtractor={item => item.index_id.toString()}
This change is a requirement for all uses of a keyExtractor so that would include React-Native components like; FlatList and ActionSheet.
-
1
-
3I kept putting KEY={item => item.id} instead of using keyEXTRACTOR. :D Thanks! Commented Apr 28, 2021 at 7:31
keyExtractor={(item, index) => index.toString()}
This will solve the warning given by React and React Native.
-
1I'm always appreciative of answers that can silence a warning without changing behavior while also working in every case– ICWCommented Jun 11, 2021 at 16:37
-
1Do note that using an array index as the key for a component is a bad practice and is discouraged by the React docs (except that there's absolutely no other choice) See more here reactjs.org/docs/lists-and-keys.html Commented Jul 13, 2021 at 19:17
You could try this solution:
keyExtractor={(item, index) => item + index.toString()}
-
2this answer is already present, by user Aun Abbas. Duplicated.– alvaro gCommented Apr 26, 2021 at 5:29
-
I know But some time index.toString() did not resolve the issue, So item+index.toString() is the best solution to fix the warning, Commented Apr 27, 2021 at 6:04