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

0
votes

I'm new to react-native I'm writing an app flat list contains cards but I get this error here is my code 

          constructor (props) {
        super(props);
        this.state = {
            GridListItems: [ // Home Screen Cards Data [STATIC]
              { id: 1 , key: "222" , img: 'https://i.ibb.co/Lt88dTg/makeup.png' },
               { id: 2 ,key: "2" , img: 'https://i.ibb.co/H4NRnZK/Photographers.png'},
               { id: 3 ,key: "Wedding Halls" , img: 'https://i.ibb.co/b2JdtHW/wedding-Hall.png'},
               { id: 4 ,key: "Wedding Planners" , img: 'https://i.ibb.co/g95HhKT/image-1.jpg'},
               { id: 5 ,key: "Ateliers for Dresses" , img: 'https://i.ibb.co/g4ksBDk/wedding.png'},
            ]
        };
    }
    renderItem = ({item}) => {
      return(
        <TouchableOpacity key={item.id.toString()}
        style={styles.GridViewContainer}
    >
      </TouchableOpacity>
      )

    }
render () {
  const carousel = this.mainCarousel(1); // Rendering the Carousel 

  return (
     <SafeAreaView style={styles.safeArea}>

    { this.gradient }
    <ScrollView
      style={styles.scrollview}
      scrollEventThrottle={200}
      directionalLockEnabled={true}
    >
        {/* { carousel }  */}

        <FlatList

        data={ this.state.GridListItems }
        keyExtractor={(item) => item.id.toString()}
        renderItem={ this.renderItem }
        numColumns={2}
        initialNumToRender={6}
/>
    </ScrollView>

</SafeAreaView>

);
}

but I get Warning: Each child in a list should have a unique "key" prop. See https://fb .me/ react-warning-keys for more information.%s,

what am I doing wrong here?

2
reactjsreact-native
I think you've posted the wrong part of your components. Do you have a .map() or any other iterating function inside of a render function? The warning should tell you which component causes the issue – Auskennfuchs
no i don't have .map() or anything here is the project github repo can you see what's wrong it's really furstrating :D github.com/Ov3rControl/Weddi – mohamed adel

2 Answers

1
votes

Check if this solves the issue : keyExtractor={({item, index}) => item.id.toString()} If not , Use this instead : keyExtractor={(item, index) =>${index}} or 

keyExtractor={(item, index) => index.toString()}
1
votes

I would make an console.log statement in the keyExtractor to see what you are getting: 

keyExtractor={(item, index) => {
  console.log('item', item);
  return item.id.toString();
}}

This way you see what data is passed into the function and return the relevant part.

By the way: a Flatlist is a scrollable list, so you do not need to wrap it in a ScrollView. See https://facebook.github.io/react-native/docs/flatlist