how to create Dynamic pickers inside loop in react-native? - react-native

Question

This is my steps:
The Json code:
"features": [
{
"name": "size",
"selected": null,
"values": [
{
"value": "40",
"label": "40",
},
{
"value": "41",
"label": "41",
}
]
},
{
"label": "color",
"selected": "gray",
"values": [
{
"value": "gray",
"label": "gray"
},
{
"value": "black",
"label": "black",
}
]
}
]
Step2: define state
constructor(props) {
super(props);
this.state ={selectedDropDownValue:[]};
}
step3:
main render:
render{
return(
{this.printPickers()}
);
}
and
printPickers(){
const listItems = data.map((obj,index) =>
<Item picker key={'mykey1' + index}>
<Picker
selectedValue={(this.state.selectedDropDownValue[obj.label]) ?this.state.selectedDropDownValue[obj.label] : obj.selected}
onValueChange={(itemValue, itemIndex, itemName) =>this.pickerChange(itemIndex,itemValue,obj.name)}
>
{
obj1.values.map( (v)=>{
return <Picker.Item key={'mykey2' + index} label={v.label} value={v.value} />
})
}
</Picker>
</Item>
);
return (<View>{listItems}</View>);
}
and finally:
pickerChange(itemIndex,itemValue,itemName){
this.setState({
selectedDropDownValue: Object.assign(this.state.selectedDropDownValue, {[itemName]: itemValue})
});
}
My problem I can not change options of each pickers by touching them but with console.log(this.state.selectedDropDownValue), I get right data.
My problem I can not change options of each pickers by touching them but with console.log(this.state.selectedDropDownValue), I get right data.

Answer 1

There is some mismatch in json data. Either both should have a key label or name.
So suppose both items have key as label then you need to update your pickerChange function call like this:
this.pickerChange(itemIndex,itemValue,obj.label)