0

I am using the same code in two different components. I got the error in react native code Encountered two children with the same key, 29270. 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. How I can solve this error I don't understand what is the error and why to occur please help me to solve the problem


<SafeAreaView style={styles.container}>
                    <FlatList data={this.state.dataSource}
                        renderItem={({item}) => 
                            <TouchableOpacity style={styles.item} onPress= {() =>this.props.navigation.replace('Test', { StudentUid: item1.uniquecode,  AccessToken: this.state.accessToken })} >
                                <Text style={{fontSize:16, fontWeight:'bold'}}>{item.id} {item.firstname} {item.middlename} {item1.lastname}</Text>
                            </TouchableOpacity>
                        }
                    />
                </SafeAreaView>

can  I use like this 

<SafeAreaView style={styles.container}>
                    <FlatList data={this.state.dataSource}
                        renderItem={({item}) => 
                            <TouchableOpacity key={item.id} style={styles.item} onPress= {() =>this.props.navigation.replace('Test', { StudentUid: item1.uniquecode,  AccessToken: this.state.accessToken })} >
                                <Text style={{fontSize:16, fontWeight:'bold'}}>{item.id} {item.firstname} {item.middlename} {item1.lastname}</Text>
                            </TouchableOpacity>
                        }
                    />
                </SafeAreaView> 
Is this write code?
Harshada
  • 115
  • 2
  • 8

1 Answers1

0

You have two options:

  1. supply a key to your child TouchableOpacity with key={item.id}
  2. create a keyExtractor function like this
    const keyExtractor = (item) => {
      return item.id.toString();
    };

and define this function in your Flatlist with keyExtractor={keyExtractor}

Christian
  • 4,596
  • 1
  • 26
  • 33
  • can you explain it with my code? using 1st option. – Harshada Oct 28 '21 at 11:21
  • well, solution 1 is code that you just add to your `TouchableOpacity` for solution 2 I would need your whole code, but I think it is self explanatory if you look into the documentation of `Flatlist` – Christian Oct 28 '21 at 11:27
  • this.props.navigation.replace('Test', { StudentUid: item1.uniquecode, AccessToken: this.state.accessToken })} > is this write – Harshada Oct 28 '21 at 11:30
  • I have edited my question please check it. – Harshada Oct 28 '21 at 11:54