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");
      // }}
      >
        <View
          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>
    </>
  )
}
...

CodePudding user response：

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