How to prevent state reset while navigating between screens? react native - react-native

Question

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>
);
}
}

Answer 1

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',
});