Using onBlur with JSX and React

Question

I am trying to create a password confirmation feature that renders an error only after a user leaves the confirmation field. I\'m working with Facebook\'s React JS. This is my i

Answer 1

There are a few problems here.

1: onBlur expects a callback, and you are calling renderPasswordConfirmError and using the return value, which is null.

2: you need a place to render the error.

3: you need a flag to track "and I validating", which you would set to true on blur. You can set this to false on focus if you want, depending on your desired behavior.

handleBlur: function () {
  this.setState({validating: true});
},
render: function () {
  return 

    ...
    
    ...
    {this.renderPasswordConfirmError()}
  
},
renderPasswordConfirmError: function() {
  if (this.state.validating && this.state.password !== this.state.password2) {
    return (
      

        Please enter the same password again.
      
    );
  }  
  return null;
},