On screen A, I have a dropdown with its default state set. When a new value is selected from the dropdown, the state updates and navigates to a new screen with data based on the updated state. In the new screen, there is a back button in the header as well as the android device's back button.
Clicking either the android back button or the header back button takes me back to the previous screen, but I want to reset the dropdown's state when returning to the previous screen so that it shows the original default option.
class DropdownSales extends Component {
constructor(props)
{
super(props)
this.state = {
oem : 'all',
oem_type : [],
pickerSelection: 'OEM Wise',
pickerDisplayed: false,
}
}
fetch_default = () =>
{
var headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Headers': 'x-access-token',
'x-access-token': this.state.id
}
axios.post('http://**********************', {
oem: this.state.oem
}, {headers: headers})
.then((res) =>
{
let TotalSales = res.data.data[0].TotalSales;
})
.catch(err => {
console.log(err)
});
}
setPickerValue = (newValue) =>
{
this.props.navigation.navigate('OemLevelTwo', {value: newValue});
this.setState({
pickerSelection: newValue
});
this.togglePicker();
}
togglePicker = () => {
this.setState({
pickerDisplayed: !this.state.pickerDisplayed
})
}
render() {
return (
<View>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<TouchableOpacity onPress={() => this.togglePicker()} style={{flexDirection:'row', marginTop:10, marginLeft: 10}}>
<Text>
{ this.state.pickerSelection }
</Text>
<Icon name="arrow-drop-down" color='#000' size={20}/>
</TouchableOpacity>
<Modal
visible={this.state.pickerDisplayed}
animationType={"fade"}
transparent={true}
onRequestClose={ () => {
this.setState({
pickerDisplayed: !this.state.pickerDisplayed
})
}}>
<View style={{ margin: 15, padding: 20,
backgroundColor: '#efefef',
bottom: 60,
alignItems: 'center',
position: 'absolute' }}>
{ oem_type.map((value, index) => {
return <TouchableOpacity key={index} onPress={() => this.setPickerValue(value)} style={{ paddingTop: 4, paddingBottom: 4 }}>
<Text>{ value }</Text>
</TouchableOpacity>
})}
</View>
</Modal>
</View>
)
}
}
The initial placeholder text in the modal dropdown is currently 'OEM Wise'.
When a value is selected from the dropdown, the state pickerSelection reflects the new selection, such as 'model A'. I would like it to show 'OEM Wise' in pickerSelection when returning from the new screen.
Any assistance would be greatly appreciated.