Array.map rendering the given data twice in React-Native

Question

I am having the array of data which is rendered using map in React Native.But the component is rendering the data twice throwing the exception

Warning: Each child in a list should have a unique "key" prop.

Here is my code.

  const test = ["Test1","Test2","Test3" ]

<View>
 {test.map(item=><Text>{item}</Text> )}
</View>

If i understand correctly, your data is showing up twice? Can you show more relevant code. Also this is just a warning which can be fixed using a unique key. — Tushar Shahi
– Tushar Shahi, Commented Sep 21, 2021 at 9:37

Seba99 · Accepted Answer · 2021-09-21 09:45:34Z

1

Warning: Each child in a list should have a unique "key" prop.

As it says ... It's just a warning

That can be fixed adding some unique key to your <Text>

const test = ["Test1", "Test2", "Test3"];
<View>
  {test.map((item, index) => <Text key={index}>{item}</Text> )}
</View>

Worth to mention that using index as key is anti-pattern in certain use cases.

With the sample you gave us, the data should only be printed once

answered Sep 21, 2021 at 9:45

Seba99

1,3391 gold badge17 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1