React change state

Question

I have an array in the state and want to change the array depending on the index here is the method I use

dynamicFieldsOnChange(e, index) {
    this.setState({[product_colors[index]]: e.target.value});
};

But it's not working any idea why?

Possible duplicate of [Why can't I directly modify a component's state, really?](https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really) — flppv, Mar 23 '19 at 09:15
https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b — Yossi, Mar 23 '19 at 09:18
@flppv and what about the first question it's not duplicated, why is `[[e.target.id][index]]` not working? — Kadiem Alqazzaz, Mar 23 '19 at 09:20
@SimpleWebDesigner your code isn't complete to answer that. What is `index` ? — flppv, Mar 23 '19 at 09:21

prabin badyakar · Answer 1 · 2019-03-23T09:22:24.570

0

Directly updating state value using

this.state[e.target.id] = e.target.value

is a bad practice. You should always avoid that.

Instead, you should do something like this,

this.setState({[e.target.id] : e.target.value});

This will set id in a local state.

edited Mar 23 '19 at 09:22

answered Mar 23 '19 at 09:14

prabin badyakar

1,636
2
16
24

`this.setState = {[e.target.id] : e.target.value}` does not work. – Kadiem Alqazzaz Mar 23 '19 at 09:19
I need it with `[index]` please that's the problem – Kadiem Alqazzaz Mar 23 '19 at 09:23

score 0 · Answer 2 · answered Mar 23 '19 at 09:58

0

You need to get the previous state first, using prevstate callback event. if you want to retain all the elements of an array . spread the prevState . then call the product_colors then pass the modified array.

Like this:

  dynamicFieldsOnChange(e,index)
  {
    this.setState( (prevState) => {
      prevState.product_colors[index] = e.target.value
      return{
        ...prevState,
        product_colors: [...prevState.product_colors]
      }
      });
  };

answered Mar 23 '19 at 09:58

Mervzs

1,114
7
21

can you you give me the initial and final output of the state? to know what s the problem? – Mervzs Mar 23 '19 at 10:04
here is the array for example `product_colors: (2) ["white", "New Entry 1"]` I want to change `"New Entry 1"`, so I used `index` (which in this case equals 1) to change the entry – Kadiem Alqazzaz Mar 23 '19 at 10:07
I mean , what is the output and input of state, on implementing of the code above that i suggested. – Mervzs Mar 23 '19 at 10:09
error : `Uncaught TypeError: Cannot read property 'value' of null` – Kadiem Alqazzaz Mar 23 '19 at 10:10
your error here must be e.target.value, does not exist in the first place. check the e property in console log to get the proper address of the value you wanna get. try to make e.value.target to static value like. prevState.product_colors[index] = 'Change' to know that the logic is working – Mervzs Mar 23 '19 at 10:14

React change state

2 Answers2