React Native-Maps: Warning: Each child in a list should have a unique "key" prop

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I'm implementing display of multiple markers in React Native. Checking for help in different links such as Getting- Warning: Each child in a list should have a unique "key" prop. in my React Native app , How can I get rid of this warning message?: Each child in a list should have a unique "key" prop , Warning: Each child in a list should have a unique “key” prop , Warning - Each child in a list should have a unique "key" prop etc, have been unsuccessful. All of them provide an addition of a key e.g index but the same warning pops and the app restarts. My key is vehicle.vid as indicated on the code snippet. What am I getting wrong?

{vehicles ? vehicles.map((vehicle, _index) => { return ( <Marker key={vehicle.vid} coordinate={{ latitude: vehicle.vl_long, longitude: vehicle.vl_lati, title={vehicle.co_name + ' - ' + vehicle.num_plate} onPress={() => { navigation.navigate(routes.BUS_STATUS, { car: vehicle, uTravel: travelDetials }) <MaterialCommunityIcons name="bus-marker" color="red" size={40} </Marker> {/* <MapViewDirections origin={{ latitude: Number(vehicle.vl_lati) ? Number(vehicle.vl_lati) : 0, longitude: Number(vehicle.vl_long) ? Number(vehicle.vl_long) : 0, destination={{ latitude: 1.326014, longitude: 32.418924, apikey={GOOGLE_MAPS_APIKEY} strokeWidth={3} // strokeColor="hotpink" strokeColor="green" lineDashPattern={[1]} /> */} : null} </MapView> </View> <TouchableWithoutFeedback // onPress={() => { // console.log("Map Clicked"); // }} style={{ padding: 10, color: colors.primary, <View style={styles.row1}> <Feather name="activity" color={colors.iconColor} size={40} /> <Text style={{ color: colors.text }}> No. of Available Vehicles: {vehicles.length} </Text> </View> </View> </TouchableWithoutFeedback>

You need to add the key to the most top-level element. Is your case thats the fragment(the <> ) instead of the <Marker> component. You can add a key to the fragment like so:

 {vehicles ?
 vehicles.map((vehicle, _index) => {
              return (
                <React.Fragment key={vehicle.vid}> // Was <>
                  <Marker
                    coordinate={{
                      latitude: vehicle.vl_long,
                      longitude: vehicle.vl_lati,
                    title={vehicle.co_name + ' - ' + vehicle.num_plate}
                    onPress={() => {
                      navigation.navigate(routes.BUS_STATUS, { car: vehicle, uTravel: travelDetials })
                    <MaterialCommunityIcons
                      name="bus-marker"
                      color="red"
                      size={40}
                  </Marker>
               </React.Fragment>
Checkout the React docs for more information: Fragment Docs
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.