i am creating dynamic pickers inside my code , the number of pickers are based on response under my configurable Array.I am able to create pickers but the problem i am facing that if i update any of the picker it resets the values of all pickers immediately , i know when i call setState function the Render Method get called again manage items as per the current state value , but it’s my requirement in project , so can any one suggest me a way to do that , it’s very critical for me.
Here my code :-
loadData(item) {
return item.options.map(user => (
<Picker.Item label={user.label} value={user.id} />
))
}
onClickDropdown(value,index){
let selectValue = this.state.selectedDropDownValue;
selectValue[index] = value;
this.setState({
selectedDropDownValue: selectValue
});
}
renderConfigurableProductDetail() {
array = this.props.ProductDetailState.productData.configurable;
{
return array.map((item,i) => {
if(item.label!="Size"){
return <View style={{ flex: 1, backgroundColor: "white", flexDirection: "column", marginTop: 8 }}>
<CustomText style={{ fontSize: 16, fontFamily: "futuraLigtBt", marginLeft: 6, paddingLeft: 15, paddingRight: 15, paddingTop: 5, paddingBottom: 5 }}>
{item.label}
</CustomText>
<Picker
selectedValue={this.state.selectedDropDownValue[i]}
onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue,itemIndex)}>
{this.loadData(item)}
</Picker>
</View>;
}
})
}
};
Configurable Array :-
"configurable": [{
"id": "142",
"code": "size",
"label": "Size",
"options": [{
"attribute_id": "142",
"atribute_code": "size",
"id": "171",
"label": "XL",
"products": [
"2071",
"2074"
]
}, {
"attribute_id": "142",
"atribute_code": "size",
"id": "172",
"label": "L",
"products": [
"2072"
]
}]
},
{
"id": "93",
"code": "color",
"label": "Color",
"options": [{
"attribute_id": "93",
"atribute_code": "color",
"id": "50",
"label": "Blue",
"products": [
"2071"
]
},
{
"attribute_id": "93",
"atribute_code": "color",
"id": "60",
"label": "Black",
"products": [
"2072"
]
}, {
"attribute_id": "93",
"atribute_code": "color",
"id": "64",
"label": "Cyna",
"products": [
"2072"
]
}, {
"attribute_id": "93",
"atribute_code": "color",
"id": "61",
"label": "White",
"products": [
"2071",
"2074"
]
}
]
},
{
"id": "148",
"code": "format",
"label": "Format",
"options": [{
"attribute_id": "148",
"atribute_code": "format",
"id": "102",
"label": "Download",
"products": [
"2072",
"2071",
"2074"
]
},
{
"attribute_id": "148",
"atribute_code": "format",
"id": "103",
"label": "File",
"products": [
"2071",
"2074"
]
}
]
}
]
Please let me know if there is a way to achieve this , I Goggled alot but does not found anything which can get fit in my code.So i am here to seek your help
Regards