Data gets mixed up when scrolling

[Skipperlla]

Simulator.Screen.Recording.-.iPhone.13.-.2022-09-13.at.04.24.56.mp4

As seen in the video, when I scroll, the data of the active card above shifts to the others as it goes down. Can anyone help with the solution for this? In addition, when I scroll down, I get this error.

Here are my codes

<FlashList
            data={selectedMedia}
            renderItem={RenderItem}
            numColumns={2}
            keyExtractor={keyExtractor}
            onEndReachedThreshold={0.5}
            estimatedItemSize={200}
            decelerationRate="fast"
            disableAutoLayout={true}
            disableHorizontalListHeightMeasurement={true}
            onEndReached={onEndReached}
            // getItemLayout={getItemLayout}
            ListFooterComponent={ListFooterComponent}
          />

[davebcn87]

What's in your RenderItem?

[Skipperlla]

  const RenderItem = useCallback(
    ({item, index}: {item: IMedia; index: number}) => (
      <MediaCard
        photo={item?.posterPhoto || item?.profilePhoto || item?.photo}
        originalTitle={item?.originalTitle || item?.originalName}
        title={item?.name || item?.title}
        id={item.id}
        index={index}
        score={item.score}
        genres={item?.genres}
        selectedMedia={selectedMedia}
        mediaType={item.mediaType}
        queryMediaType={query.mediaType}
        setSelectedMedia={setSelectedMedia}
        selectedCard={
          selectedMedia?.filter((result) => {
            return item.id === result.id;
          })?.length
        }
      />
    ),
    [selectedMedia],
  );

[fortmarek]

You probably want selectedMedia to be in your extraData or pass the selected indicator directly into the renderItem.

[naqvitalha]

It's possible that your keyExtractor doesn't return unique values. That's what the warning is trying to tell you.