This React-Native warning has refused to go: Each child in a list should have a unique "key" prop

Question

I am creating an app with React Native and I've used the map method to show two items in an array.
But the warning keeps showing:

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

Here is my code:

<View>
  {arrayType.map((item, key)=> {
    return(
      <>
        <View key={item + key} style={customStyle.main}>
          <Text>{item}</Text>
        </View>
      </>
    )
  })}
</View>

Why is it still showing that warning?

Does this answer your question? [Can I add a key prop to a React fragment?](https://stackoverflow.com/questions/59390955/can-i-add-a-key-prop-to-a-react-fragment) — 0stone0, Feb 09 '23 at 11:05

score 2 · Accepted Answer · answered Feb 09 '23 at 11:02

2

You are using a React.Fragment: <></>.

try this instead:

<View>
  {arrayType.map((item, key)=> {
    return(
      <View key={item + key} style={customStyle.main}>
        <Text>{item}</Text>
      </View>
    )
  })}
</View>

answered Feb 09 '23 at 11:02

devpolo

2,487
3
12
28

Thanks. This solved it by removing the react.fragment. – kingsJayson Feb 09 '23 at 11:05

score 1 · Answer 2 · answered Feb 09 '23 at 11:01

The parent component should consist key prop when rendering list in loop.

so code should look like this.

<View>
   {arrayType.map((item, key) => {
      return(
         <View key={item + key} style={customStyle.main}>
            <Text>
               {item}
            </Text>
         </View>
      )})
   }
</View>

This React-Native warning has refused to go: Each child in a list should have a unique "key" prop

2 Answers2