Handling clicks of Dynamic pickers inside loop react-native

#1

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

0 Likes

#3

When new state depends on previous state we should use the format setState((prevState, props) => {}) see reference in the docs. In any way we should never mutate state directly and this is what this line does selectValue[index] = value since selectValue is just a reference to this.state

So here is what exactly i need to do :-

// load selectedDropDownValue data from state with the item's id
// pass the item value to the change function
 <Picker
      selectedValue={this.state.selectedDropDownValue[item.id]}
      onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue, itemIndex, item)}
    >
      {this.loadData(item)}
    </Picker>

 onClickDropdown(data, index, item){
      // save each items selected data with their id
      this.setState((prevState) => {
        const value = Object.assign({}, prevState.selectedDropDownValue, { [item.id]: data});
        return { selectedDropDownValue: value};
      });
    }
0 Likes

closed #4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.

0 Likes