Each child in a list should have a unique "key" prop, I am getting this error in my react-CodePudding

I am getting the below errors when I tried to fetch array data from firebase firestore. How can I solve this issue could someone please suggest me the code structure.

VM22 bundle.js:3927 Warning: Each child in a list should have a unique "key" prop.

Check the render method of CellRenderer. See https://reactjs.org/link/warning-keys for more information. at http://localhost:19006/static/js/bundle.js:157320:19 at CellRenderer (http://localhost:19006/static/js/bundle.js:172017:36)

import React, { useState, useEffect } from 'react';
import {View, Button, Text, FlatList, StyleSheet, Pressable, TouchableOpacity} from 'react-native'
import {firebase} from '../config';

const Testing = ({ navigation }) =>{
    const [users, setUsers] = useState([]);
    const todoRef = firebase.firestore().collection('testing');
  

    useEffect(() => {
        todoRef.onSnapshot(
            querySnapshot => {
                const users = []
                querySnapshot.forEach((doc) => {
                    const {  ArrayTesting
              
                    } = doc.data()
                    users.push({
                        id: doc.id,
                        ArrayTesting
                      
                    })
                })
                setUsers(users)
            }
        )
    }, [])
return (

   <View style={{ flex:1,}}>
   <FlatList 
 data={users}
  numColumns={1}
  renderItem={({item}) => (

    <Pressable >
<View>

  <View>
{ (item.ArrayTesting) 
  ? item.ArrayTesting.map((item) => <Text>{item}</Text>) 
  : <Text></Text>
}

</View>

</View>
 </Pressable>
     )} />
</View>
);}
export default Testing;

CodePudding user response：

While you are mapping components in react, you have to provide unique key for the components, so it will know which component to rerender.

   <View>
{ (item.ArrayTesting) 
  // if item has unique field, please provide that as key in Text
  ? item.ArrayTesting.map((item,index) => <Text key={index}>{item}</Text>) 
  : <Text></Text>
}

</View>

CodePudding user response：

Hey flatlist already has a property called keyExtractor , please use that , so that all elements already have an unique key and you dont have to pass any explicitly to child comps :

<Flatlist
keyExtractor={(item, _index) => String(_index)}
/>

And also in your renderItem add the below :

 { (item.ArrayTesting) 
      ? item.ArrayTesting.map((item,index) => <Text key={index}>{item}</Text>) 
      : <Text></Text>
    }

Hope it helps, feel free for doubts

CodePudding user response：

The above answer is correct, however, I'd like to add a point of clarity that the answer above even touched on a bit. I'd like to emphasize it a bit more :).

When adding a key prop to each element (so that react knows how to keep track of them in the DOM), we should provide each <Text /> component with a proper unique key.

This could be like an id: 1 property returned on each object or data point from the server. This will ensure headaches of React misunderstanding your data since your keys are just ordered indexes. If ever your data changes (you update your list to remove one item) React might remove the wrong item do to shifting indexes.

<View>
 {(item.ArrayTesting) 
   // if item has unique field, please provide that as key in Text
   ? item.ArrayTesting.map((item) => <Text key={item.id}>{item}</Text>) 
   : <Text></Text>
 }
</View>