Check password validation in React

Question

I want to check the validation of Re-password in React, I wrote this code for that but when you set(for Example) passsword:"1234" and Re-password:"1234" it doesn't apply as true but when you enter the fifth character for Re-password it becomes True . Do you know what is issue?

import React , { Component } from 'react'; 

export default class RegistrationForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email:'',
            password :'',
            password_re:'',
            password_has_error:false
        };
    }


    checkPassword() {
         if(!this.state.password || this.state.password != this.state.password_re) {
            this.setState({password_has_error:true});
        }
        else {
            this.setState({password_has_error:false});
        }
    }

    handleChange(event) {
        this.setState({[event.target.name] : event.target.value });

        if (event.target.name == 'password' || event.target.name == 'password_re')
            this.checkPassword();
    }

    handleSubmit(event) {
        event.preventDefault(); 
        // TODO: will submit the form here
    }

    render(){
        return ( 
            <form onSubmit={(event)=>this.handleSubmit(event)}>
                <div>
                    <label>Name</label>
                    <input 
                        type="text" 
                        name="name" 
                        value={this.state.name} 
                        onChange={(event)=>this.handleChange(event)} 
                        />
                </div>
                <div>
                    <label>Email address</label>
                    <input 
                        name="email"
                        type="email" 
                        value={this.state.email} 
                        onChange={(event)=>this.handleChange(event)} 
                        /> 
                </div>
                <div>
                    <label>Password</label>
                    <input 
                        type="password" 
                        name="password" 
                        value={this.state.password} 
                        onChange={(event)=>this.handleChange(event)} 
                        />

                </div>
                <div>
                    <label>Re-enter password</label>
                    <input 
                        type="password" 
                        name="password_re" 
                        value={this.state.password_re} 
                        onChange={(event)=>this.handleChange(event)} 
                        />
                </div>
                <button type="submit">Submit</button>
            </form>
        ) 
    } 
}

Edit:This is my React component

score 3 · Accepted Answer · answered May 13 '18 at 13:42

3

This is because, setState is async, it will not update the state value immediately.

Write it like this, by using setState callback method:

handleChange(event) {
  const { name, value } = e.target

  this.setState({
      [name] : value 
    }, () => {
      if (name == 'password' || name == 'password_re')
        this.checkPassword();
      }
    }
  );
}

Check this for more details about setState async behaviour.

answered May 13 '18 at 13:42

Mayank Shukla

100,735
18
158
142

It worked perfectly , Thank you so much for the link and explanation. – sherman May 13 '18 at 13:55

Check password validation in React

1 Answers1