setState not working for objects inside the this.state in ReactJs

Question

I am working with forms in React and facing this weird issue.

This is how my component class looks -

export default class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        username: 'Bla'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value})
  }

  render() {
      return (
         <div>
            <form onChange={this.handleChange}>
              <label> Name: <input type="text" value={this.state.username} name="username" /> </label>
              <input type="submit" value="Submit" />
            </form>
         </div>
      );
   }
}

And this is how the rendered page looks in the browser.

I am able to update/change the text in the textbox.

Now I tweak my component class a bit, basically I change the this.state object and correspondingly update the HTML input element.

These are the changes done-

this.state = {
   formEle: {
      username: 'Bla'
   }
};

<label> Name: <input type="text" value={this.state.formEle.username} name="username" /> </label>

After making these two changes when I render the page in my browser everything is same except I am not able to update/change the content in the textbox.

My hunch is there must be some issue with the this.setState function, but when I printing the values of event.target.name and event.target.value I am getting the expected value. Not sure what exactly is going wrong.

Kris Selbekk · Accepted Answer · 2018-03-17 13:07:35Z

3

The reason you're no longer able to update your input box is that you're no longer setting the correct state variable.

If you change your handleChange event listener to look like this, stuff should start working again:

handleChange(event) {
  this.setState({ 
    formEle: {
      ...this.state.formEle,
      [event.target.name]: event.target.value,
    },
  });
}

You specified that you want to read state from this.state.formEle.username, so therefore you need to make sure you're setting that particular part of the state tree.

Hope this helps - and happy coding!

answered Mar 17, 2018 at 13:07

Kris Selbekk

7,6729 gold badges51 silver badges74 bronze badges

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

Collectives™ on Stack Overflow

setState not working for objects inside the this.state in ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related