In react native app, I have a home screen and a second screen that the user uses to add items that should be displayed on the home screen. The problem is when I add items in the second screen and go to the home screen I can see the added items but when I go again to the second screen to add other items, it deletes the previously added items.

Any help to explain why this happens and how to handle it? Thanks in advance Here's the code of the app.

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="AddItem" component={AddItem} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

and here's the home screen component

class Home extends Component {
  render() {
    const { expenseList } = this.props.route.params || '';
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Budget:</Text>
        <Button
          title=" "
          onPress={() => this.props.navigation.navigate('AddItem')}
        />
        <View>
          {expenseList === '' && (
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('AddItem')}>
              <Text>Create your first entry</Text>
            </TouchableOpacity>
          )}
          {expenseList !== '' && (
            <FlatList
              style={styles.listContainer}
              data={expenseList}
              renderItem={(data) => <Text> title={data.item.name} </Text>}
            />
          )}
        </View>
      </View>
    );
  }
}

and the second screen

class AddItem extends Component {
  state = {
    name: '',
    amount: '',
    expenseList: [],
  };

  submitExpense = (name, amount) => {
    this.setState({
      expenseList: [
        ...this.state.expenseList,
        {
          key: Math.random(),
          name: name,
          amount: amount,
        },
      ],
    });
  };

  deleteExpense = (key) => {
    this.setState({
      expenseList: [
        ...this.state.expenseList.filter((item) => item.key !== key),
      ],
    });
  };
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={(name) => this.setState({ name })}
          value={this.state.name}
          placeholder="Name"
          keyboardType="default"
        />
        {this.state.name === '' && (
          <Text style={{ color: 'red', fontSize: 12, paddingLeft: 12 }}>
            Name is required
          </Text>
        )}
        <TextInput
          style={styles.input}
          onChangeText={(amount) => this.setState({ amount })}
          value={this.state.amount}
          placeholder="Amount"
          keyboardType="numeric"
        />
        {this.state.amount === '' && (
          <Text style={{ color: 'red', fontSize: 12, paddingLeft: 12 }}>
            Amount is required
          </Text>
        )}
        
        <Button
          title="Add"
          style={styles.btn}
          onPress={() => {
            if (
              this.state.name.trim() === '' ||
              this.state.amount.trim() === ''
            ) {
              alert('Please Enter the required values.');
            } else {
              this.submitExpense(
                this.state.name,
                this.state.amount
              );
            }
             
          }}
        />
        <Button
        title="Go to Dashboard"
          style={styles.btn}
        onPress = {() => { this.props.navigation.navigate("Home", {
                expenseList: this.state.expenseList,
              });}}
        />
        <FlatList
          style={styles.listContainer}
          data={this.state.expenseList}
          renderItem={(data) => <Text> title={data.item.name} </Text>}
        />
      </View>
    );
  }
}

CodePudding user response：

You have a few options:

1- Use Redux:

https://react-redux.js.org/using-react-redux/connect-mapstate

2- Save your state in the AsyncStorage and get it wherever you want

3- Pass your state as param in the route:

navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });