i need to catch my key on my renderItem, i can see them on my key extractor but not on my renderItem.

here is my flatlist

const renderMyMoments = () => {
    return (
      <FlatList
        data={myFishBook}
        renderItem={renderItem}
        ItemSeparatorComponent={() => {
          return <View style={{ height: 3 }}></View>;
        }}
        numColumns={3}
        keyExtractor={(item, index) => String(index)}
      />
    );
  };

Here is my render item inside details i have a console.log and he returned me an undefined key . i need this key to access to my components properly

  const renderItem = ({ item, key }) => {
    return (
      console.log("item", item.item.id),
      (
        <View style={{ flex: 1 }}>
          <Moment
            picture={item.photo}
            visible={modalVisible}
            details={() => {
              setModalVisible(true);
              setUserPictureIndex(key);
              console.log("key", key); ====> this console.log is undefined
            }}
            close={() => {
              setModalVisible(false);
            }}
            pictureProfil={require("../../assets/images/testfish1.png")}
            name={profil.firstname}
            // poisson={myFishBook[pictureIndex]?.has_killed_fish}
            pictureFocus={myFishBook[7]?.photo}
            poisson={myFishBook[0]?.has_killed_fish}
            commentaire={myFishBook[0]?.description}
            relache={myFishBook[0]?.captured_fish}
            taille={myFishBook[0]?.fish_length}
            poids={myFishBook[0]?.fish_weight}
            // datePeche={profil?.moments[pictureIndex]?.date}
          />
        </View>
      )
    );
  };

also my render

   {moments ? (
              <View style={styles.renderMoment}>{renderMyMoments()}</View>
            ) : null}

how i can have my key not undefined inside my renderItem ???

CodePudding user response：

Change ({ item, key }) to ({ item, index }), key not exist.

After changed, index will be your keyExtractor you need.

More information: https://reactnative.dev/docs/flatlist#required-renderitem