Why is the event not firing correctly?

Question

React

I have this React component:

import React from 'react';

import './AppSearch.css'

class AppSearch extends React.Component {

  constructor() {
    super();

    this.state = {
      request: '',
    }

    this.onSearch = (e) => {
      this.setState({
        request: e.target.value,
      })
      console.log(this.state.request);
    }

  }

  render () {
    return(
      <input className='AppSearch' value={this.state.request} onChange={ this.onSearch } placeholder = 'Search parametr' />
    )
    
  }
};

export default AppSearch;

For some reason the onChange event is not working correctly. I can't figure out why.
The onSearch function first changes the request, and then only displays this value, but it turns out as if it works the other way around:

The screenshot shows that I entered three twos, but there are only two in the console. With what it can be connected?

Answer 1

First, events do not work - none and never. Event handlers fire. Secondly - between "wrong" and "not the way I would like" there is a significant difference, try to realize it.
The setState method is asynchronous. If you want to access the changed state, use the callback:

this.setState({
  request: e.target.value,
}, () => console.log(this.state.request))