Question 33087 in React native Question posted in
The official React Native documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search