Two children with the same key in React Native with Native Base

Question

How I can fix the following error: Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

That is my List:

<List style={custom.PartList}>
     <FlatList extraData={this.state} data={this.state.data} keyExtractor={this._keyExtractor.bind(this)} renderItem={this._renderItem.bind(this)} />
</List>

That is my List Item:

   /* Render Item - Render One Row - Item - (Tool) */
    _renderItem({ item }) {
        const custom = styles(this.props);

        return (
            <View style={custom.PartView}>
                <ListItem style={custom.PartListItem} onPress={() => this._handleRead(item.tool_id, item.tool_name, item.tool_description, item.tool_count, item.tool_availability)}>
                    <Image style={custom.PartImage} source={require('@app/assets/images/tools.png')}/>
                    <Text style={custom.PartName}>{item.tool_name}</Text>
                </ListItem>
            </View>
        );
    }
    /* /Render Item - Render One Row - Item - (Tool)/ */

And that is my keyExtractor method:

/* Key Extractor Method - For Index Tools */
  _keyExtractor(index) {
      return index.toString();
  }
/* /Key Extractor Method - For Index Tools/ */

Answer 1

You're binding this to keyExtractor function, so it'll provide this object as a first parameter (where you refer it as index). Therefore the return value will always be the string presentation of Object (= [Object object])

The simple solution is just to declare keyExtractor={this.keyExtractor} without any binding.

Answer 2

For me it worked adding exactly like this:

<FlatList
    data={mySkills}
    keyExtractor={this.keyExtractor}
    renderItem={({item, index}) => <SkillCard key={index} skill={item} />}
  />