How to set match password in react Js

Try this:

handleConfirmPassword = (event) => {
    if (event.target.value !== this.state.password) {
      message.error('error');
    }
}

You can also set your state like:

state = {
    password: '',
    confirmPassword: ''
}

And then, you can check the match on the handleConfirmPassword and on the submit.

handleConfirmPassword = (event) => {
    if (event.target.value !== this.state.password) {
      message.error('error');
      this.setState({confirmPassword: event.target.value})
    }
}

And then, a submit handler to the form:

handleSubmit = (event) => {
   if(this.state.password !== this.state.confirmPassword){
       message.error("The passwords doesn't match")
       return false; // The form won't submit
   }
   else return true; // The form will submit
}

You can use password check callback:

checkPassword = (rule, value, callback) => {
  if (value && value !== form.getFieldValue('Password')) {
    callback("The passwords don't match");
  } else {
    callback();
  }
};

Thru validator rule:

<FormItem {...styles.formItemLayout} label="Password">
  {getFieldDecorator('Password', {
    rules: [{ required: true, message: 'Password is Required!' }],
  })(
    <Input
      name="password"
      type="password"
      value={password}
      style={styles.margin}
    />,
  )}
</FormItem>
<FormItem {...styles.formItemLayout} label="Confirm Password">
  {getFieldDecorator('ConfirmPassword', {
    rules: [
      { required: true, message: 'Confirm your Password!' }, 
      { validator: this.checkPassword }
    ],
  })(
    <Input
      name="password"
      type="password"
      style={styles.margin}
    />,
  )}
</FormItem>

import { useForm } from 'react-hook-form'

const { register, errors, handleSubmit, formState } = useForm({
    mode: "onChange"
  })

  const [newpassword, setNewPassword] = useState('')

  const [confirmpassword, setConfirmPassword] = useState('')

  const  { touched  } = formState;

  const onVerifyNewPassword = () => {

    if(touched.newpassword === true && touched.confirmpassword === true){
      if(newpassword !== confirmpassword){
        console.log('The passwords dont match')
        return
      }else{
        console.log('Ok.')
      }
   }
  }

              <form onSubmit={handleSubmit(onSubmit)}>
                <div className="input-group">
                  <label htmlFor="new">New Password</label>
                </div>
                <input type="newpassword"
                  ref={register({ required: true })}

                  name="newpassword"
                  onChange={(e) => setNewPassword(e.target.value)}
                  onBlur={onVerifyNewPassword}
                />
                <label htmlFor="new">Confirm Password</label>
                <input type="confirmpassword"
                  ref={register({ required: true })}
                  name="confirmpassword"
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  onBlur={onVerifyNewPassword}



               />
                {/* <pre>{JSON.stringify(formState, null, 2)}</pre> */}


                <button><span>Change</span></button>

I just thought I'd throw my two cents in as well :)

import React, {Component} from 'react';

class Form extends Component {

  constructor(props) {
    super(props)
    this.state = {
      password: {
        new: null,
        match: null,
        confirmed: null,
      },
    }
    this._handleNewPassword = this._handleNewPassword.bind(this)
    this._handlePasswordMatch = this._handlePasswordMatch.bind(this)
    this._handleFormSubmission = this._handleFormSubmission.bind(this)
    this._handleConfirmedPassword = this._handleConfirmedPassword.bind(this)
  }


  _handleFormSubmission({ currentTarget }) {
    // Check the password 
    // match on form submission
    this._checkPasswordForMatch().then(
      ({ success }) => {
        if (success) {
          // post data to API
        } 
      }
    )
  }

  // handle storing the
  // new password in state
  _handleNewPassword(value) {
    let state = Object.assign({}, this.state)
    state.password.new = value 
    this.setState(state)
  }

  // handle storing the
  // confirmed password in state   
  _handleConfirmedPassword(value) {
    if (value === this.state.password.new) {
      let state = Object.assign({}, this.state)
      state.password.confirmed = value;
      this.setState(state);
    }
  }

  // handle storing the
  // confirmed password in state  
  async _handlePasswordMatch() {
    let { password } = this.state;
    let state = Object.assign({}, this.state);
    if (password.new === password.confirmed) {
      state.password.match = true        
    } else {
      state.password.match = false
    }
    await this.setState(state)
    return {
      success: state.password.match
    }   
  }

  render() {
    return (
       <div 
        method='POST'
        onFormSubmit={this._handleFormSubmission}>
        <input 
          type='password'
          name='new-password'
          onChange={this._handleNewPassword}
          pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}' />
        <input 
          type='password'
          name='confirm-password'
          onChange={this._handleConfirmedPassword}
          pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}' />
          <button type='submit'>Submit</button> 
      </div>
    );
  }
}

export default Form;

This is state that contains data :

    this.state = {
        name: '',
        email: '',
        password: '',
        confirmpass: '',
      
    }
}

Update password and confirm password :

onpasschange= (e) => {
    this.setState({ password: e.target.value })
}
oncpasschange = (e) => {
    this.setState({ confirmpass: e.target.value })
}

HTML Form :

  <div className="form-group">
          <label className="lable" htmlFor="exampleInputPassword1">
            Password
          </label>
          <input
            type="password"
            value={this.state.password}
            onChange={this.onpasschange}
            className="form-control"
            id="exampleInputPassword1"
            placeholder="Password"
          />
        </div>
        <div className="form-group">
          <label htmlFor="exampleInputPassword1">Confirm Password</label>
          <input
            type="password"
            value={this.state.confirmpass}
            onChange={this.oncpasschange}
            className="form-control"
            id="exampleInputPassword1"
            placeholder="Password"
          />
        </div>

handle events:

  click= (e)={      

 if (this.state.password !== this.state.confirmpass) {
  alert("Passwords don't match");   // alert when password doesn't match
} else {   
  alert('correct');   // alert when password  match
}

};

what I did was this;

`const [password, setPassword] = useState("");
  const [matchpassword, setMatchPassword] = 
    useState("");
  const [error, setError] = useState("");

const onSubmitHandler = (e) => {
e.preventDefault();

if(!matchPassword.match(password){
alert("Passwords do not match!")
} else if(matchPassword.length !== password.length) 
 {
alert("Passwords do not match!")
} else{
alert("continue")
}
}


function handleSetMatchPassword(event) {
setMatchPassword(event.target.value);
let match_pass = event.target.value;
setMatchPassword(match_pass);

if (!match_pass.match(password)) {
  setError("Passwords does not match!");
} else if (match_pass.length !== password.length) {
  setError("Passwords does not match!");
} else {
  setError("Passwords match!");
 }
}


return(
  <div>
    <div>
      <input
            type="password"
            onChange={handlePasswordChange}
            value={password}
            name="password"
            id="passWord"
            placeholder="Password"
            required
          />
   </div>
   <div>
    <input
            type="password"
            value={matchPassword}
            onChange={handleSetMatchPassword}
            name="matchPassword"
            id="coPassword"
            placeholder="Confirm password"
            required
          />
     </div>
       <div>
         {error}
     </div>
  </div>
       )`