key should be unique react native error while mapping data array?-CodePudding

I have a listing component in my react native map. in which I'm mapping the list of items in the component. How the problem is. I have been getting warnings that each child should have a unique key. Even though I have given them a unique key but still getting that warning.

here is the code.

<ScrollView horizontal>
    {this.state.isLoading === true ? (
        [...Array(7)].map((item, index) => <PremiumShimmer key={index} />)
      ) : this.state.isError === true ? (
      <View>
         <Text style={{ color: "black" }}>
           Facing some issue to load data from server
         </Text>
      </View>
      ) : this.state.Data.length === 0 ? (
        <Text style={{ color: "black" }}>No Data Founbd</Text>
      ) : (
        this.state.Data.map((item) => (
         this.ItemRenderer({item})
        ))
      )}
</ScrollView>

ItemRenderer ({ item }) {
    return (
        <PremiumItemListComponent item={item} navigation={this.props.navigation} />
    );
};

PremiumItemListComponent

             <TouchableOpacity
                style={styles.listBox}
                onPress={() => this.props.navigation.navigate("Detail", { data: this.props.item })}
                >
                <ImageBackground style={styles.listImage} imageStyle={{ borderRadius: 26}} source={{uri:SERVER_URL.apiUrl this.props.item.background}}>
                    <Text style={{color:"white",fontSize:13,paddingLeft:10,fontWeight: 'bold'}}>{this.props.item.name}</Text>
                        <View style={{ flexDirection: 'row', flexWrap: 'wrap',padding:10}}>
                            { 
                                [...Array(5)].map((e, i) =>
                                // 3.688689 will be replaced by rating
                                // console.log(typeof i,typeof 4, i 1<=4)
                                <Ionicons name={i 1<=Number((3.688689).toFixed(0))?"star-sharp":"star-outline"} size={15} color="#FFE600" />
                                )
                            }
                        </View>
                </ImageBackground>     
            </TouchableOpacity>

I have console logged item.ids and they are unique 23, 24, and 25. if You need more code to help. You can ask. Thanks in Advance.

CodePudding user response：

Your code looks right, i don't think the warning you are getting for key is from this specific component, but i would like to add a few things to make your life a little easier.

Never use Index as key. Index will change if your data changes which will eventually make the purpose of keys useless.
Wherever possible use FlatList Component instead of a map since you get a easy keyExtractor Prop and it increases your performance if the list is long

Example : -

  <FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />

using the keyExtractor Prop you can pick out and convert a unique value from your data into a key and it automatically adds the key prop into rendered component wrapper.