'Nativebase Picker Item not showing Selected value
I am trying to select item from picker item. problem is when i clicked on item then on function handler onValueChangeJob(value) perform some task
onValueChangeJob(value) {
this.setState({ jobValue: value.jobTitle})
USE value.number form another task
});
}
Below is my picker component
<Picker
style={commonStyle.pickerStyle}
textStyle={commonStyle.textStylePicker}
headerTitleStyle={commonStyle.headerTitleStyle}
headerBackButtonTextStyle={commonStyle.headerBackButtonTextStyle}
iosIcon={<Icon name="ios-arrow-down" />}
mode="dropdown"
placeholder="MAKE A SELECTION"
placeholderStyle={commonStyle.placeholderStyle}
note={false}
itemTextStyle={commonStyle.itemTextStyle}
selectedValue={this.state.jobValue}
onValueChange={this.onValueChangeJob.bind(this)}
>
{jobItems}
</Picker>
While The jobitems coming from map which created in render() function like
jobItems = this.state.jobTypesList.map((v,i) => {
return <Picker.Item key={i} value={v} label={v.jobTitle} />
});
So here if I used directly in picker.item props value-{v.jobTitle} then selected value change but i want to use whole object v in onValueChangeJob(value) function. One main thing state update but cant displaying on selected value of picker tried lots of different things but not happening the thing what i want. how should i handle this with proper example as i am new in react native.
Look at how my picker looks in this image
Solution 1:[1]
After lots of googling on one solution i find that solution that i have to filter this.state.jobTypesList this array on onValueChange handler and grab objects of particular job Title
return this.state.jobTypesList.map((v,i) => {
return <Picker.Item key={i} value={v.jobTitle} label={v.jobTitle}
});
let filterArray = this.state.jobTypesList.filter((v) => v.jobTitle === value)[0]
filterArray.jobTitle
filterArray.jobNumber
Solution 2:[2]
If you are using yup schema and validations, then you can use getValues() in selectedValue property.
I resolved it by
<Picker
selectedValue = {getValues('storeId')}
onValueChange={itemValue =>
setValue('storeId', itemValue, true)
}>
.../>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | kunj choksi |

