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

Question

1. 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

Answer 1

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>
  );
};

Answer 2

You have to set the key to a specific value in your map, not a array with 2 objects. The item._id seems to be an array with 2 objects. So instead do item.name maybe?