0
190
ViewsHow to store multiple values separately from the native base picker
I have product attributes like the image above for which I'm mapping the otherDetails array to get the keys i.e. size, color and its variations like small, large etc. To get the variations I'm mapping productValue array. Then I'm showing it in the picker like this
{product.otherDetails.map((item) => (
<View style={styles.mainText}>
<Text
style={{
fontSize: RFPercentage(1.6),
marginLeft: width / 3,
textTransform: "uppercase",
}}
>
{item.productKey}
</Text>
<View style={{ width: width / 3.2 }}>
<Picker
note
mode="dropdown"
selectedValue={attributes}
onValueChange={onChangeAttributes.bind(this)}
>
<Picker.Item label="Select" value="select" />
{item.productValue?.map((product) => (
<Picker.Item
label={product.attributeName}
value={product.attributeName.toLowerCase()}
/>
))}
</Picker>
Its rendering fine on the UI but now I want to store the user choice w.r.t the keys. For instance we have two productKeys i.e. size and color, if the user chooses small from the size key and red from the color key. How can I store them separately in a state? and also be able to update the choices w.r.t the keys.
·
Juan Pablo Isaza
1 answers
Answer question0
You can maintain a state of selected attributes, for instance:
this.state = {
...
...
selectedAttributes: []
}
Then when rendering the picker, the onValueChange would be:
<Picker
onValueChange={(newValue) => {
let selectedAttributes = {...this.state.selectedAttributes}
selectedAttributes[item.productKey] = newValue;
this.setState({selectedAttributes})
})>
...
</Picker>
·
Juan Pablo Isaza
Report
Answer question