'React native useState is updating as undefined values

I am trying to update the state value from the route.params value . The value is present in the console.log but not updating in the state . It is showing undefined inside the state .

const NoteViewerScreen = ({ navigation, route }) => {
  var initState = [];

  const [list, setList] = useState(initState);

  useEffect(() => {
    const data = route.params;
    console.log("updating state ");
    if (data) {
      console.log("prev state", list);
      console.log("updating with", data);
      setList((list) => [...list, data]);
    }
  }, [route]);

  let listArray =
    list != undefined ? [{ title: list?.title, description: list?.desc }] : [];

  console.log(listArray);

  return (
    <View style={styles.container}>
      {listArray.length < 1
        ? list?.map((e, i) => {
            return (
              <View key={i}>
                <NotesCard
                  navigation={navigation}
                  noteTitle={e.title}
                  noteDescription={e.description}
                ></NotesCard>
              </View>
            );
          })
        : null}
      <TouchableOpacity
        style={styles.add}
        onPress={() => navigation.navigate("NotesEditer")}
      >
        <Text>Add Notes</Text>
      </TouchableOpacity>
    </View>
  );
};

This is my code , any help is much appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source