Q:

React function isn't behaving as its expected to

Heres a function from my react app:
handleSubmit(evt) {
  evt.preventDefault();
  this.setState({
    width: "",
    height: "",
    color: ""
  });
  console.log(this.state)
};

In my input, I set the value of input to the width, height and color. this handleSubmit function is happens when a form in filled.
But I have  set the state via setState before the console.log line. So this will replace the values from the form, before the console.log is called. I should get 
{width :" ", height :" ", color :" "} 

But instead, I get the value that was set by the input. But it seems like setState is only working when the full function is done, not before the log. Why?

A:

But it seems like setState is only working when the full function is done, not before the log. Why?

setState doesn't change the state immediately. Ref: https://reactjs.org/docs/react-component.html#setstate
If you want to do something right after the state change, use a callback function.
handleSubmit(evt) {
  evt.preventDefault();
  this.setState({
    width: "",
    height: "",
    color: ""
  }, () => {
    console.log(this.state)
  });
};

