When I'm selecting first value from the dropdown then first-time setState set to the selected value (In this case first value is my dynamic value rendered from data other than "Please Select Events") but again it set to null, This is happening only with first value of dropdown and for remaining values it is working well.
state = {
data:[],
isLoading: true,
eventtitle:'',
}
componentDidMount = () => {
fetch(`${Vars.host}Multifilter/events?event_title=${this.state.eventtitle}`, {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
data: responseJson,
isLoading: false
})
})
.catch((error) => {
console.error(error);
});
}
multifilter = () => {
console.log("this.state.eventtitle",this.state.eventtitle);
fetch(`${Vars.host}Multifilter/events?event_title=${this.state.eventtitle}`, {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
render(){
return (
<View>
<Picker
selectedValue={this.state.mainevent}
onValueChange={(itemValue, itemIndex) =>
this.setState({ mainevent: itemValue },() => {
this.multifilter();
})}>
<Picker.Item label='Please Select Events' value='' />
{
this.uniqueOptions(this.state.data, "main_event").map((name) => {
**following line returning event names but when I'm selecting first value then first time setState set the selected value but again it set to null, This is happening only with first value of dropdown**
return <Picker.Item label={name} value={name} key={name} />
})
}
</Picker>
<View>
)
}