handling dynamic state with picker

Bren Published at Dev

bren

i have a component that if i pressed a button it will create new picker component

the problem is the pickers shared the same state

i want each component have their own state

is there any way to resolve this problem ?

so far i have

    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            qty: undefined,
            selected2: undefined,
            garbageTypeQty: 1,
            dataKey: undefined,
            trashData: undefined,
            inputGarbage: [],
            total: undefined
        };
    }
componentDidMount() {
   estimationPrice(20)
     .then((res) => {
           this.setState({ trashData: res.data, loading: false })
      }).catch((err) => {
           console.log(err);
      })
    }
<Button small success onPress={() => this.setState({ garbageTypeQty : this.state.garbageTypeQty + 1 })}>
  <Text style={styles.buttonAdd}>Add</Text>
</Button>
    <Item picker regular style={styles.itemInputBox}>
      <Picker
       mode="dropdown"
       iosIcon={<Icon name="arrow-down" />}
       style={styles.itemPickerInput}
       selectedValue={this.state.selected2}
       onValueChange={this.onValueChange2.bind(this)}
      >

         {this.state.trashData.map((item, key) => (
           <Picker.Item label={item.type.type_name} value={item.type.type_name} key={key}  />
                ))
           }
      </Picker>

bren

it works now

i use https://reactjs.org/docs/update.html

it looks like

  handleChange = (index, attributes) => {
    let newState = update(this.state, {
      garbageInput: {
        [index] : {
          ...attributes
        }
      }
    })
    this.setState(newState);
  }

Collected from the Internet

Please contact [email protected] to delete if infringement.