how to set value of a class property in react

Question

How can I access and set a dynamic e.target.value of a class with setState?

I've tried this.setState({fields[e.target.name]: e.target.value});

class App extends Component  {
  constructor() {
    super();
    this.state = {
      data: [],
      fields: {
        name: ''
      }
    }
  }

  handleChange = e => this.setState({fields[e.target.name]: e.target.value});

  render() {
    const { fields } = this.state;
   
    return (
      <>
        <input type="text" name="name" placeholder="name" onChange={this.handleChange} value={fields.name} />
      </>
    )
  }
}

export default App;

Nested state is anti-pattern in React: components' state should be kept flat, precisely to face the issue you're facing. — Nino Filiu
– Nino Filiu, Commented Mar 26, 2019 at 22:35

pooya72 · Accepted Answer · 2019-03-27 02:28:01Z

5

This is a slightly similar to this question. There are two ways to update the object. And as others have said, nesting state like this is an antipattern. This is a good read-up on why.

1- Simplest one:

First create a copy of fields then do the changes in that:

let fields = Object.assign({}, this.state.fields);    //creating copy of object
fields[e.target.name] =  e.target.value               //updating value
this.setState({fields});

Instead of using Object.assign we can also write it like this:

let fields = {...this.state.fields};

2- Using spread operator:

  handleChange = e => {
    e.persist(); //need to make the values persist because of event pooling
    this.setState(prevState => ({
      ...prevState,
      fields: {
        [e.target.name]: e.target.value
      }
    }))
  }

edited Mar 27, 2019 at 2:28

answered Mar 26, 2019 at 22:54

pooya72

1,08310 silver badges18 bronze badges

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

2 Comments

reisdev Over a year ago

The OP wants to update the fields value using e.target.value, not just the name property of the fields

pooya72 Over a year ago

Thanks for pointing that out. Changed the code to reflect that.

reisdev · Accepted Answer · 2019-03-26 22:37:23Z

4

You can't access a state property like this. A possible solution is to create a copy from the fields, modify the value and then set the new state, like below:

handleChange = e => {  
    // The line below creates a copy of the state, using the spread operator
    let fields = { ...this.state.fields };
    fields[e.target.name] =  e.target.value
    this.setState({fields});
}

edited Mar 26, 2019 at 22:37

answered Mar 26, 2019 at 22:32

reisdev

3,4202 gold badges20 silver badges42 bronze badges

4 Comments

Nino Filiu Over a year ago

I'd use let fields = {...this.state.fields}; instead for simplicity

reisdev Over a year ago

Or even let fields = [ ... this.state.fields]. Will add it to the answer. Thank you!

Nino Filiu Over a year ago

Beware, fields is an object, not an array!

reisdev Over a year ago

@NinoFiliu I haven't noticed that, sorry

Collectives™ on Stack Overflow

how to set value of a class property in react

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related