Create a Controlled Input -- don't understand console.log and hint

Tell us what’s happening:
Hi, complete beginner at React here & many thanks in advance for help. I’ve completed this challenge but I don’t understand what’s happening. So, 2 questions.

  1. I added a console.log to the handleChange() function. So, before I’ve touched the input, there’s nothing being logged. All good. I type in a 2 into the input and the console is still empty (actually I think it’s logging an empty string). I expected the console to log a 2. I type in a 4 and the console logs 2 and not 24 as I expected. Hopefully, more succinctly:

Input: nothing
Console: nothing
Input: 2
Console: nothing (I believe it logged an empty string though)
Input: 24 (just typed in a 4)
Console: 2
Input: 246
Console: 24

You get the idea… the console appears to be logging one character/digit/whatever behind what I expected. Why is this? Do I fundamentally misunderstand React?

  1. So, I looked at the “Get a Hint” section and it says that I need to set the value attribute as well as the onChange handler. If I only have the onChange handler inside the input, the text “updates from from the browser not the state”? When they say browser, do they mean that the text is updating using the global value? Why is this not desired? And, when I did remove the value attribute from the code below but kept everything else the same, my console.log messages were still the same, so I don’t understand what the value attribute is doing.
    Your code so far

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
    
    // !! LOOK HERE don't get what's happening here LOOK HERE !!
    console.log(this.state.input);
}
  render() {
    return (
      <div>
        <input value = {this.state.input} onChange = {this.handleChange.bind(this)}/> 
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-input

setState is asynchronous, so your console.log may not have the current value of this.state.input at the time it logs. setState takes an optional callback where you could put such a console.log statement. The callback executes once the setState has completed.