I have main App.js
where i implemented StackNavigator
:
export default class App extends Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="MainPage" component={MainPage} />
<Stack.Screen name="Submit" component={Submit} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
What i want to do is Pass data from Submit
component into my MainPage
and display it in ScrollView
from array: arr
in state
of MainPage
.
Mainpage
looks like this. I want to pass function addNode
to adding node into state
of my MainPage
:
class MainPage extends Component {
constructor(props) {
super(props);
this.state = {
arr: [],
liters: '',
time: '',
};
}
addNode = (time, liters) => {
if (this.state.time) {
this.state.arr.push({calc: time + liters});
this.setState({time: ''});
this.setState({liters: ''});
}
};
onPress = () => {
this.props.navigation.navigate('Submit', {addNode: this.addNode});
};
render() {
return (
<View>
<ScrollView>{this.state.arr}</ScrollView>
<TouchableOpacity onPress={this.onPress}>
<Text>+</Text>
</TouchableOpacity>
</View>
);
}
}
My Submit
component looks like this. on button Submit
i want to pass data from inputs to MainPage
, add it to array and then display it in scroll view:
class Submit extends Component {
constructor(props) {
super(props);
this.state = {
liters: '',
time: '',
};
}
goBack() {
this.props.navigation.goBack();
this.props.navigation.state.params.addNode({
time: this.state.time,
liters: this.state.liters,
});
}
render() {
return (
<View>
<Text>Form</Text>
<TextInput
onChangeText={time => this.setState({time})}
value={this.state.time}
/>
<TextInput
onChangeText={liters => this.setState({liters})}
value={this.state.liters}
/>
<Button title="Submit" onPress={this.goBack} />
</View>
);
}
}
When i click Submit
from my Submit
component i get error presented in this screen:
My question is, how to pass data back to parent
component from children
component using StackNavigator
? What im doing wrong here?