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.
JavaScript
x
13
13
1
const BadFood = ({ ingredients }) => {
2
return (
3
<View>
4
<Text>Bad Ingredients</Text>
5
{ingredients.map((ing) => (
6
<View>
7
<Text key="{ing}">{ing}</Text>
8
</View>
9
))}
10
</View>
11
);
12
};
13
This is the array I’d like to destructure in firebase BadIngr = [“Peanuts”, “Dairy”]
Advertisement
Answer
As @jnpdx mentioned change your code as follows:
JavaScript
1
13
13
1
const BadFood = ({ ingredients }) => {
2
return (
3
<View>
4
<Text>Bad Ingredients</Text>
5
{ingredients.map((ing) => (
6
<View key={ing}>
7
<Text>{ing}</Text>
8
</View>
9
))}
10
</View>
11
);
12
};
13