CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooksuse-state
Kartikey Vaish
Kartikey Vaish

Reputation: 5

useState not Updating on screen in React-Native

The Output is not changing on the screen as expected My code is as follows:

import React, { useState } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import ListItem from "../components/ListItem";

import colors from "../config/colors";
import Screen from "../components/Screen";
import ListItemSeperator from "../components/ListItemSeperator";
import ListItemDeleteAction from "../components/ListItemDeleteAction";

const InitialMessages = [
  {
    id: 1,
    title: "T1",
    description: "D1",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 2,
    title: "T2",
    description: "D2",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 3,
    title: "T3",
    description: "D3",
    image: require("../assets/Images/mosh.jpg"),
  },
];

function MessagesScreen(props) {
  const [messages, UpdateMessageArray] = useState(InitialMessages);

  const handlerDelete = (message) => {
    console.log("Came to Delete");
    const newArr = messages.filter((m) => m.id !== message.id);
    UpdateMessageArray(newArr);
  };

  return (
    <Screen>
      <FlatList
        data={InitialMessages}
        keyExtractor={(message) => message.id.toString()}
        renderItem={({ item }) => (
          <ListItem
            title={item.title}
            subTitle={item.description}
            image={item.image}
            onPress={() => console.log("MESSAGE PRESSED", item)}
            renderRightActions={() => (
              <ListItemDeleteAction onPress={() => handlerDelete(item)} />
            )}
          />
        )}
        ItemSeparatorComponent={ListItemSeperator}
      />
    </Screen>
  );
}

const styles = StyleSheet.create({});

export default MessagesScreen;

On the console..it outputs as "CAME TO DELETE" and I also logged the initialMessages array after every deletion...I saw it gets updated but not on the screen. Any Idea why its not working??

Upvotes: 0

Views: 1039

Answers (1)

Kevin Moe Myint Myat
Kevin Moe Myint Myat

Reputation: 2185

FlatList is a PureComponent.

It needs a props which is changed in order to re-render. You set your data props as InitialMessages and not messages so there is no state change.

Please set your data props with messages state or else use extraData props to pass some state which can be changed.

import React, { useState } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import ListItem from "../components/ListItem";

import colors from "../config/colors";
import Screen from "../components/Screen";
import ListItemSeperator from "../components/ListItemSeperator";
import ListItemDeleteAction from "../components/ListItemDeleteAction";

const InitialMessages = [
  {
    id: 1,
    title: "T1",
    description: "D1",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 2,
    title: "T2",
    description: "D2",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 3,
    title: "T3",
    description: "D3",
    image: require("../assets/Images/mosh.jpg"),
  },
];

function MessagesScreen(props) {
  const [messages, UpdateMessageArray] = useState(InitialMessages);

  const handlerDelete = (message) => {
    console.log("Came to Delete");
    const newArr = messages.filter((m) => m.id !== message.id);
    UpdateMessageArray(newArr);
  };

  return (
    <Screen>
      <FlatList
        data={messages}
        keyExtractor={(message) => message.id.toString()}
        renderItem={({ item }) => (
          <ListItem
            title={item.title}
            subTitle={item.description}
            image={item.image}
            onPress={() => console.log("MESSAGE PRESSED", item)}
            renderRightActions={() => (
              <ListItemDeleteAction onPress={() => handlerDelete(item)} />
            )}
          />
        )}
        ItemSeparatorComponent={ListItemSeperator}
      />
    </Screen>
  );
}

const styles = StyleSheet.create({});

export default MessagesScreen;

Reference 1: https://reactnative.dev/docs/flatlist.html

Reference 2: Why FlatList is not updating dynamically in React Native

Upvotes: 1

Related Questions