Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates

Question

As Im new with React native, Can anyone understand the problem im having here. And if so do give a solution

import React from 'react'; import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native'; import { ListItem, Badge, Text } from 'native-base';

const CategoryFilter = (props) => {

return(
    <ScrollView
        bounces={true}
        horizontal={true}
        style={{ backgroundColor: "#f2f2f2" }}
    >
        <ListItem style={{ margin: 0, padding: 0, borderRadius: 0 }}>
            <TouchableOpacity
                // Here the key is different
                key={1}
                onPress={() => {
                    props.categoryFilter('all'), props.setActive(-1)
                }}
            >
                <Badge
                    style={[styles.center, {margin: 5},
                        props.active == -1 ? styles.active : styles.inactive
                    ]}
                >
                    <Text style={{ color: 'white' }}>All</Text>
                </Badge>
            </TouchableOpacity>
            {props.categories.map((item) => (
                  <TouchableOpacity
          // Here the key is also different
                  key={item._id}
                  onPress={() => {
                      props.categoryFilter(item._id.$oid), 
                      props.setActive(props.categories.indexOf(item))
                  }}
              >
                  <Badge
                      style={[styles.center, 
                        {margin: 5},
                        props.active == props.categories.indexOf(item) ? styles.active : styles.inactive
                      ]}
                  >
                      <Text style={{ color: 'white' }}>{item.name}</Text>
                  </Badge>
              </TouchableOpacity>
            ))}
        </ListItem>
    </ScrollView>
)

}

const styles = StyleSheet.create({ center: { justifyContent: 'center', alignItems: 'center' }, active: { backgroundColor: '#03bafc' }, inactive: { backgroundColor: '#a0e1eb' } })

export default CategoryFilter;

I guess the problem im having is in toucAbleOpacity but the keys are different in both components still it's giving the warning

Subha Subha · Accepted Answer · 2021-04-30T09:53:59

Pauline is right. To add remove the first key it is not necessary and make sure item._id is a unique string and not an array or some other data type. The revised code looks like this

const CategoryFilter = (props) => {
  return (
    <ScrollView
      bounces={true}
      horizontal={true}
      style={{ backgroundColor: "#f2f2f2" }}
    >
      <ListItem style={{ margin: 0, padding: 0, borderRadius: 0 }}>
        <TouchableOpacity
          onPress={() => {
            props.categoryFilter("all");
            props.setActive(-1);
          }}
        >
          <Badge
            style={[
              styles.center,
              { margin: 5 },
              props.active === -1 ? styles.active : styles.inactive,
            ]}
          >
            <Text style={{ color: "white" }}>All</Text>
          </Badge>
        </TouchableOpacity>
        {props.categories.map((item) => (
          <TouchableOpacity
            key={String(item._id)}
            onPress={() => {
              props.categoryFilter(item._id.$oid);
              props.setActive(props.categories.indexOf(item));
            }}
          >
            <Badge
              style={[
                styles.center,
                { margin: 5 },
                props.active == props.categories.indexOf(item)
                  ? styles.active
                  : styles.inactive,
              ]}
            >
              <Text style={{ color: "white" }}>{item.name}</Text>
            </Badge>
          </TouchableOpacity>
        ))}
      </ListItem>
    </ScrollView>
  );
};

Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates

2 Answers