Warning : Failed child context type: Invalid child context 'virtualizedCell.cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'

Question

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.

I 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 Koster, Oct 22 '19 at 02:42

dhj · Accepted Answer · 2018-05-29T06:20:11.650

289

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.

edited May 29 '18 at 06:20

answered Mar 30 '18 at 16:17

dhj

4,780
5
20
41

1

Works like charm – Ramesh Vishnoi Jan 16 '21 at 17:56
3

I kept putting KEY={item => item.id} instead of using *keyEXTRACTOR*. :D Thanks! – Filip Savic Apr 28 '21 at 07:31

score 6 · Answer 2 · answered Mar 04 '21 at 12:13

6

keyExtractor={(item, index) => index.toString()}

This will solve the warning given by React and React Native.

answered Mar 04 '21 at 12:13

Aun Abbas

540
7
18

1

I'm always appreciative of answers that can silence a warning without changing behavior while also working in every case – ICW Jun 11 '21 at 16:37
1

Do 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 https://reactjs.org/docs/lists-and-keys.html – Geropellicer Jul 13 '21 at 19:17

score -2 · Answer 3 · edited Jun 10 '21 at 07:09

-2

You could try this solution:

keyExtractor={(item, index) => item + index.toString()}

edited Jun 10 '21 at 07:09

Just Mohit

141
1
13

answered Apr 26 '21 at 05:03

Mirza Hayat

284
5
11

2

this answer is already present, by user Aun Abbas. Duplicated. – alvaro g Apr 26 '21 at 05: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, – Mirza Hayat Apr 27 '21 at 06:04

Warning : Failed child context type: Invalid child context 'virtualizedCell.cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'

3 Answers3