Change state object variable from form input - ReactJS

Question

I have a state:

state = {
   obj1: {
       name: "",
       message: "",
   }
}

I have a form:

<form>
<input id={obj1.name} onChange={this.handleChange}/>
<input id={obj1.message} onChange={this.handleChange}/>
</form>

on handleChange:

handleChange(e) {
    const {id, value} = e.target
    this.setState({[id]:value});

}

Instead of updating the obj1 in the state, it will create a new state variable and obj1 doesn't get updated. [id] : value works on state variables that are not objects. How can I achieve setting a new state in an object through a form change?

Why is the second input field referencing obj2? Based on your question, you have only one object, so there shouldn't be an obj2 right? — Eric McWinNEr
– Eric McWinNEr, Commented Jan 4, 2021 at 21:06
Yes, that was an mistake during the writing portion of this code. I'll have that changed. — user3559233
– user3559233, Commented Jan 4, 2021 at 21:07
So what exactly are you trying to achieve? Are you trying to update an object with a string? Because based on this code, both input fields have the same value of an empty string. So which property of the object are you trying to update? I don't get what exactly you're trying to do. — Eric McWinNEr
– Eric McWinNEr, Commented Jan 4, 2021 at 21:12
On user Input change for the ID obj1.name and obj.2, I want to realize the changes in the state object so I can use that data elsewhere. For example. When an user enters in a name in the input id=(obj1.name) I would like this.state.obj1.name to have the same data. — user3559233
– user3559233, Commented Jan 4, 2021 at 21:27
Oh... then that's a completely different thing than what you're doing here. I'll draft a demo — Eric McWinNEr
– Eric McWinNEr, Commented Jan 4, 2021 at 21:31

Eric McWinNEr · Accepted Answer · 2021-01-04 21:48:05Z

1

Ok, the thing to take away is - there's a second version of the setState method that uses a callback with the old state as a parameter. It goes something like this:

this.setState(state => ({
  // ... Do your manipulation here
}))

With this, you'll be able to "update" the state without replacing it. Try to figure it out yourself using just this hint :)

If you could, kudos! You're awesome! Check out the sandbox of what I did and let's know if you did it differently. If you couldn't, no worries, you're definitely awesome! Still checkout the sandbox here:

https://codesandbox.io/s/frosty-https-rtwr7?file=/src/ClassState.js

answered Jan 4, 2021 at 21:48

Eric McWinNEr

5336 silver badges20 bronze badges

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

2 Comments

user3559233 Over a year ago

Hi! While you were working on this awesome solution, I had mine done this way: let obj= {...this.state.obj, [id]: value}; this.setState( {obj}, ()=> { console.log(this.state); }); This is called an object spread, where I create an new obj based on the state object. Then I will pass the name variables into the new obj.

Eric McWinNEr Over a year ago

Yeah, this definitely works too, I thought of this and it's nice. There's always many ways to solve the same problem. It's just the callback with the old state as a parameter is the official way of doing it. Awesome solution though. :). P.S please consider marking the answer accepted if it worked for you and you learned anything from it. Thanks.

Collectives™ on Stack Overflow

Change state object variable from form input - ReactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related