Update Input Value while mapping React Native

Question

I am creating react-native mobile app. I have an array with some values. I want to set array's value into input field. I have added value in the fields but i can't able to update these values. I have set my values in a qty variable like this:

constructor(props) {
  super(props);
  this.state = {
    qty:[],
  }
}

componentWillMount() {
  var ids = [];
  this.props.data.map((dataImage,Index) => {
    dataImage['pro-name'] != undefined && (
      ids.push({'qty':dataImage['pro-qty']})    
    )
  })

  this.setState({qty:ids})
}

render() {
  return {
    this.props.data.map((dataImage,Index)=>(
      <View key={Index} style={productStyle.cartview}>
        {dataImage['pro-name'] && (
          <View style={productStyle.cartmain}>
            <Input value={this.state.qty[Index]['qty']} onChange={this.handleChangeInput.bind(this)} style={{width:40,height:40,textAlign:'left'}} />
          </View>
        )}
      </View>
    ))
  }
}

Its showing values properly into the input field but i can't able to type anything into the field to update the values. what can i do for this

You do not have handleChangeInput function defined in your code. — Pir Shukarullah Shah
– Pir Shukarullah Shah, Commented Feb 2, 2018 at 8:08
handleChangeInput(stateName, text) { this.setState({ [stateName]: text }) } — kiranb ghrix
– kiranb ghrix, Commented Feb 2, 2018 at 8:09

Pir Shukarullah Shah · Accepted Answer · 2018-02-02 09:49:17Z

2

I will suggest you to move your input container into separate class, its better approach and each component will handle its own state. Its easy to handle and will result better in performance too.

components = []

render() {
  return this.props.data.map((item, index) => (
    <CustomComponent data={item} index={index} ref={(ref) => this.components[index] = ref} />
  ))
}

You can then get child (CustomComponent) value from its ref.

this.components[index].getValue()
this.components[index].setValue('Value');

You will need to create these functions (getValue & setValue) in CustomComponent class.

solution

Here is solution to your query. You need to install lodash or find other solution to make a new copy qty.

<Input onChangeText={(text) => this.handleChangeText(text, index)} />

handleChangeText = (text, index) => {
  const qty = _.cloneDeep(this.state.qty);
  qty[index] = {
    qty: text
  }
  this.setState({qty})
}

edited Feb 2, 2018 at 9:49

answered Feb 2, 2018 at 8:20

Pir Shukarullah Shah

4,2522 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ranjeet singh Over a year ago

I also used this but not working, actually i want to update only values that are showing in the input field. my array insert all the values in the field properly but can't updated.

Pir Shukarullah Shah Over a year ago

This is not a complete solution, its just a sample. You need to modify it according to your needs.

Hisham Mubarak · Accepted Answer · 2018-02-02 10:15:46Z

0

Your Input's value is set to this.state.qty[Index]['qty']. And to change it on text edit, you can do it like this. You do not need to bind the function, instead use an arrow function like this.

onChangeText={ (newValue) => {
    this.setState({ <your-input-value-state>:newValue })
}}

answered Feb 2, 2018 at 10:15

Hisham Mubarak

1,6093 gold badges24 silver badges28 bronze badges

Comments

Ahsan Ali · Accepted Answer · 2018-02-02 11:34:39Z

0

You have to update the value of each Input individually on onChange event.

Replace your with Input with this

<Input value={this.state.qty[Index]['qty']}
       onChange={this.handleChangeInput.bind(this, Index)}
       style={{width:40,height:40,textAlign:'left'}}
/>

and update the state accordingly with the Index when the event is called

handleChangeInput(index, value){
    let {qty} = this.state;
    let qty_update = qty.slice();
    qty_update[index]['qty']  = value;
    this.setState({qty: qty_update});
}

edited Feb 2, 2018 at 11:34

answered Feb 2, 2018 at 11:17

Ahsan Ali

5,1352 gold badges19 silver badges28 bronze badges

Collectives™ on Stack Overflow

Update Input Value while mapping React Native

3 Answers 3

solution

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

solution

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related