Warning: Each child in a list should have a unique "key" prop. When mapping data from axios

Anthony Humphreys 0
Viewed 38

I know there is a million questions already on this topic, but either they don't work or they are not useful. I know you are supposed to put the key on the most outer View (parent), but I did that and it continues to give me this error.

I tried putting the key into the parent view in component that render {username()}, but again it still gives me the same error. Any thought?

CODE

  const username = () => {
    return user.map((user) => {
      return (
        <View key={user.key} 
        style={{padding: 1}}>
          <Text 
            style = {{    
              fontSize: 24,
              marginTop: 0,
              shadowOffset: {width: 1, height: 6},
              shadowRadius: 4,
              shadowOpacity: 0.2,
            }}>
              {user.username}
            </Text>
        </View>
      );
    });
  };
react-native reactjs
4 Answers

Try like this, maybe your user keys are the same:

const username = () => {
return user.map((user,index) => {
  return (
    <View key={index} 
    style={{padding: 1}}>
      <Text 
        style = {{    
          fontSize: 24,
          marginTop: 0,
          shadowOffset: {width: 1, height: 6},
          shadowRadius: 4,
          shadowOpacity: 0.2,
        }}>
          {user.username}
        </Text>
    </View>
  );
});

};

Alija Fajić0

Have you try to add key like this

const username = () => {
    return user.map((user) => {
      return (
         <React.Fragment key={user.key}> 
           <View  
        style={{padding: 1}}>
          <Text 
            style = {{    
              fontSize: 24,
              marginTop: 0,
              shadowOffset: {width: 1, height: 6},
              shadowRadius: 4,
              shadowOpacity: 0.2,
            }}>
              {user.username}
            </Text>
        </View>
         </React.Fragment>
      );
    });
  };
Hakob Sargsyan0 
const username = () => {
user.map((user, index) => {
  return (
    <View key={index} 
    style={{padding: 1}}>
      <Text 
        style = {{    
          fontSize: 24,
          marginTop: 0,
          shadowOffset: {width: 1, height: 6},
          shadowRadius: 4,
          shadowOpacity: 0.2,
        }}>
          {user.username}
        </Text>
    </View>
  );
});
};
Jacob Roberto0

Warning is still coming maybe because there is no key value in user object or it is not unique.

You can try in this way.

const username = () => { return user.map((user,index) => { return ( <View key={index}> <div>any element</div> </View> ); }); }

As key should be a unique identifier which helps react to identify which element has changed or we performed any actions on. Using index will help fixing the warning

Manikanta Manchiganti0
Related