I encounter a problem with my form validation in react that I don't know how to resolve, here he's :

I want to check if two inputs are same, for example if two mail input are equal to check if the user didn't misspelled his mail but I want a dynamic validation, when the user is writing, check meanwhile.

There is my code :

Open the console and start writing in input, and you will see in the OnChange function that both state are never equal because it's like the Onchange function is updating not enough fast, but if I put a setTimeout , it will work because the states are plete.

I encounter a problem with my form validation in react that I don't know how to resolve, here he's :

I want to check if two inputs are same, for example if two mail input are equal to check if the user didn't misspelled his mail but I want a dynamic validation, when the user is writing, check meanwhile.

There is my code :

https://codesandbox.io/s/1v4xxqjzo3

Open the console and start writing in input, and you will see in the OnChange function that both state are never equal because it's like the Onchange function is updating not enough fast, but if I put a setTimeout , it will work because the states are plete.

• javascript
• reactjs

• Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. – Yury Tarabanko Commented Aug 28, 2017 at 10:19
• setState() is asynchronous, that's why you see the wrong output in the console. Your example is working. – Sotiris Kiritsis Commented Aug 28, 2017 at 10:23

2 Answers 2

setState actions are asynchronous.

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

You should use setState callback function to pare inputs values:

onChangeInput(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }, () => console.log(this.state.mail === this.state.confMail));
  }

As Ivan Minakov explained and demonstrated in his answer, a setState call does not necessarily take effect immediately. That is, following synchronous code will not necessarily observe the new state and you need to wait until the callback passed as the second argument of setState is called (if any).

Another approach could be perhaps passing a callback as the first argument of setState, which lets you transform your state in place using the current state. This can also be used to conveniently set a state switch determining whether your inputs match, e.g.:

const { name, value } = e.target;

this.setState(state => {
    state[name] = value;

    if (state.mail !== state.confMail) {
        state.error = "Mail and confirmation mail do not match.";
    } else {
        state.error = undefined;
    }

    return state;
});