CODEWITHSUNDEEP
reactjs
Strahinja Ajvaz
Strahinja Ajvaz

Reputation: 2633

react setState with dynamic key

I have the following snippet of code:

onChange(e) {
    e.persist
    this.setState((prevState) => {
      prevState[e.target.id] =  e.target.value
      return prevState
    })
  }

the how would i set the state for each key using something like the code above.

this is the initial state:

 this.state = {
      heading: this.props.match.params.length > 1 ? "Edit Post" : "Create Post",
      title: '',
      category: '',
      body: '',
      author: ''
    }

Upvotes: 14

Views: 18324

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104369

Basic rule is:

We can use Computed property names concept and use any js expression to compute the object property name dynamically. For that we need to put the expression inside [].

Like this:

var obj = {
   [10 * 20 + 1 - 5]: "Hello"
};

console.log('obj = ', obj);

Solution:

As per the code you posted, you need to put e.target.id inside [], like this:

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

Or we can create that object first, then pass that object to setState function, like this:

onChange(e) {
    let obj = {};
    obj[e.target.id] = e.target.value
    this.setState(obj);
}

Also you don't need the prevState. You can directly update the state variable with new value.prevState is required only when new state value is dependent on previous state value, like in case of counter.

Upvotes: 25

Related Questions