CODEWITHSUNDEEP
reactjsreact-native
Leo S
Leo S

Reputation: 339

FlatList update wrong element

I have update my flatlist according to last received messages that is rendered componenet of Flatlist. For that reason i coded below code but this code always update last item of flatlist instead of its key.

  const [lastMessage, setlastMessage] = useState([
    { key: "1", text: "j1" },
    { key: "2", text: "j2" },
    { key: "3", text: "j3" },
  ]);
  const goBack = (id, data) => { // Here is the change statement that update flatlist.
    let result = lastMessage.filter((obj) => {
      return obj.key != id;
    });
    
    result.push({ key: id, text: data });
    setlastMessage(result);
  };

Flatlist:

<FlatList
          contentContainerStyle={{
            width: "100%",
            paddingBottom: 200,
          }}
          keyExtractor={(item) => item.key}
          data={lastMessage}
          extraData={lastMessage}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity
                activeOpacity={0.55}
                onPress={() =>
                  navigation.navigate("ChatScreen", {
                    ChatRoomID: item.key,
                    onGoback: goBack, // Here is the reference of function
                  })
                }
              >
                <ChatCard text={item.text} />
              </TouchableOpacity>
            );
          }}
        />

Chat Screen:

  async function handleSend(messages) {
    const writes = messages.map((m) => {
      chatsRef.add(m);
      goBack(ChatRoomID, m["text"]); // i give value to parent from that
    });
    await Promise.all(writes);
  }

Upvotes: 0

Views: 96

Answers (2)

michael
michael

Reputation: 4173

Use Array.map instead of filter.

const goBack = (id, data) => {
  // Here is the change statement that update flatlist.
  let result = lastMessage.map(obj =>
    obj.key === id ? { key: id, text: data } : obj
  );

  setlastMessage(result);
};

Upvotes: 3

Taghi Khavari
Taghi Khavari

Reputation: 6582

try this:

const goBack = (id, data) => {
  setlastMessage((value) => {
    let result = value.filter((obj) => {
      return obj.key != id;
    });

    return [...result, { key: id, text: data }];
  });
};

Upvotes: 0

Related Questions