ReactJS, how to get nextState, comes in this.state the past value of state (completely finished example)?

Question

JavaScript

Open the console, enter a value in two fields when they are greater than or equal to 8, change the button class, but when the length is checked, and we remove one character, in state we actually have 7, but when we get the length, we have 8 and the button state remains active, through setTimeout it works but it's a crutch.
Thanks for the help, the finished component is here => stackblitz.com/edit/template?file=components%2FForm.js
Open the console, you can see the length of the login field.
!!! The final result, when we have 8 characters in the field, we removed one from us 7 to remove the active class from the button.
Thank you for trying to describe the problem in as much detail as possible.

Answer 1

setState is an asynchronous function and you can pass a callback to it as the second argument:
In a good way, you should rewrite the handler, since you create new copies every render, especially since you pass the name property to the inputs, but for some reason do not use it in the handler.
Rewrite like this:

handleChange = ev => {
   const { name, value } = ev.target;
   const symbols = split('')(value);
   const result = filter(i => characterVerification(i), symbols);

   this.setState({
     [name]: join('')(result)
    }, () => this.getStateValues(),
  );
};

It is still not clear why it was pulled into the ramda project .