CODEWITHSUNDEEP
javascriptreactjs
totalnoob
totalnoob

Reputation: 2741

how to set value of a class property in react

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;

Upvotes: 1

Views: 10267

Answers (2)

pooya72
pooya72

Reputation: 1083

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
      }
    }))
  }

Upvotes: 5

reisdev
reisdev

Reputation: 3383

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});
}

Upvotes: 4

Related Questions