title: How to test if two inputs are the same in react during on onChange event?
body: <p>I am trying to do an <code>onChange</code> event in react and test if two input fields are the same. This is for confirming a password. I want to show a little message below as they are typing if the passwords match or do not match. I tried to set that state and compare the state in the onChange event, but that did not work because I would get the state 1 step behind.</p>
  
  <pre><code>import React, { Component } from 'react';
  import swal from 'sweetalert';
  
  class UpdateUserPasswordTest extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        user: {
          currentPass: '',
          newPass: '',
          confirmNewPass: ''
        },
        match: false
      };
  
      this.updatePassword = this.updatePassword.bind(this);
      this.submitUserPassword = this.submitUserPassword.bind(this);
    }
  
    updatePassword(event) {
      event.preventDefault();
  
      this.setState({
        user: {
          ...this.state.user,
          [event.target.name]: event.target.value
        }
      });
  
      if (this.state.user.newPass === this.state.user.confirmNewPass) {
        this.setState({
          match: true
        });
      }
    }
  
    submitUserPassword() {
      this.props.onUpdatePassword(this.state.user);
    }
  
    render() {
      const { currentPass, newPass, confirmNewPass } = this.state.user;
      return (
        &lt;div&gt;
          &lt;input
            type="password"
            name="currentPass"
            placeholder="Current Password"
            onChange={e =&gt; this.updatePassword(e)}
            value={currentPass}
          /&gt;
          &lt;input
            type="password"
            name="newPass"
            placeholder="New Password"
            onChange={e =&gt; this.updatePassword(e)}
            value={newPass}
          /&gt;
          &lt;input
            type="password"
            name="confirmNewPass"
            placeholder="Confirm New Password"
            onChange={e =&gt; this.updatePassword(e)}
            value={confirmNewPass}
          /&gt;
          &lt;button onClick={this.submitUserPassword}&gt;Update Pasword&lt;/button&gt;
          {this.state.match === false ? (
            &lt;div style={{ color: 'red' }}&gt;Passwords Must Match&lt;/div&gt;
          ) : (
            &lt;div style={{ color: 'green' }}&gt;Passwords Match!&lt;/div&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default UpdateUserPasswordTest;
  </code></pre>