Update an element in an array object at state by using textInput React Native

Question

What I'm trying to do here is to update the array object 'available' using textInput and below is my code. I don't know why it keeps giving me the token error at the _update function line. Please help. Thank you!

export class Inventory extends Component {
state = {
    available: [
        {id: 0, name: 'Xb', value:5},
        {id: 1, name: 'Ad', value:19},
        {id: 2, name: 'Sc', value:1},
        {id: 3, name: 'AV', value:3},
        {id: 4, name: 'Ba', value:8},
        {id: 5, name: 'Ch', value:2},
        {id: 6, name: 'Pr', value:9},
        {id: 7, name: 'Mi', value:10},
        {id: 8, name: 'Se', value:1},
    ],
}

    _update = (text,index) => this.setState({available[index].value: text});

render(){
 index = 0;
  return(
    <View style={styles.container}> 
      <TextInput style={styles.input}
      keyboardType = 'number-pad'
      returnKeyType = 'go' 
      autoCapitalize = 'none'
      maxLength = {3}
      value = {this.state.available[index].value}
      onChange = {(text) => _update(text,index)} />
    </View>
  );
}

hyb175 · Accepted Answer · 2017-07-23 08:15:09Z

9

_update = (text,index) => this.setState({available[index].value: text}); is not valid in a few ways. First, setState takes an object that should be the same key and value that is on your state right now if you are updating the value. Second, available[index].value does not evaluate to anything because available is not defined. You can only access available via this.state.available. Third, available[index].value is gonna be the key on the new component state, which is not what your desired I presume.

Change your update to be something like this

_update = (text, index) => {
  const newArray = [...this.state.available];
  newArray[index].value = text;
  this.setState({ available: newArray });
}

answered Jul 23, 2017 at 8:15

hyb175

1,2918 silver badges14 bronze badges

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

4 Comments

Thanh Pham Over a year ago

Thanks for your reply. What is the ... the [...this.state.available] ?

hyb175 Over a year ago

That is called the spread operator. Check this developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… for reference. Basically, for array, a spread operator takes the items in the array and put them in this new array that we are creating.

Omer Over a year ago

I'm trying the same method but it says Cannot modify managed objects outside of a write transaction. ... Im working on react native and realm database to populate that array.

hyb175 Over a year ago

Try following the realm doc and wrap the code that you are using to populate array in a ‘realm.write(() => {...})’ block

Brianhenry · Accepted Answer · 2018-12-14 15:16:08Z

2

Never mutate this.state like you do it directly with the normal javascript way. Actually you should have in mind that this.state is immutable. The best way to go with this:

1- First create the copy of state array.

2- Find index of the item (if index is available skip this one).

3- Update the value of item at that index.

4- Use setState to update the state value. So in your case you would do something like:

 (text,index) => {
   let newArray = [...this.state.available];
     newArray[index] = {...newArray[index], value: text}
   this.setState({available: newArray});
  }

Hope this will help you out.

answered Dec 14, 2018 at 15:16

Brianhenry

1891 silver badge8 bronze badges

Collectives™ on Stack Overflow

Update an element in an array object at state by using textInput React Native

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related