"Each child in a list should have unique key" error persists after adding key prop-CodePudding

New to react native, and I know that each list element needs a unique key prop, but I thought I provided one here in the text element. Please guide me in the right direction.

const BadFood = ({ ingredients }) => {
  return (
    <View>
      <Text>Bad Ingredients</Text>
      {ingredients.map((ing) => (
        <View>
          <Text key="{ing}">{ing}</Text>
        </View>
      ))}
    </View>
  );
};

This is the array I'd like to destructure in firebase BadIngr = ["Peanuts", "Dairy"]

CodePudding user response：

As @jnpdx mentioned change your code as follows:

const BadFood = ({ ingredients }) => {
  return (
    <View>
      <Text>Bad Ingredients</Text>
      {ingredients.map((ing) => (
        <View key={ing}>
          <Text>{ing}</Text>
        </View>
      ))}
    </View>
  );
};