Formulario Email React

Question

I made a simple validation using react, and would like the 'b' message only to be available when the user clicked on submit how can I do?

export default class LoginApp extends React.Component {

  validarEmail=(e)=>{
       e.preventDefault();
       const email = e.target.elements.email.value;
       const password = e.target.elements.password.value.length;
       const emailValid = validator.isEmail(email)
       if(emailValid === false){
         console.log('email incorreto, favor verificar')
       }else if(password < 8 ){
          console.log('senha é muito curta, favor informar uma de maior numero de caracteres')
       }else{
         console.log('email e senha corretos')
       }
  }
    render() {  
      return (
        <div>
        <Header />
          <div className="container-app">
          <form method="get" name="modal_form" onSubmit={this.validarEmail}>
            <div className="form-group">
              <label>Email address</label><br/>
              <input className="form-control" name="email"
              />
              {!!this.validarEmail.emailValid ? <p>a</p>:<p>b</p>}
            </div>
            <div className="form-group">
              <label>Password</label><br/>
              <input className="form-control" name="password"
              />
              {!!this.validarEmail.password < 8 ? <p>a</p>:<p>b</p>}
            </div>
            <button type="submit" className="button" >Submit</button>
          </form>
        </div>
        </div>

      );
    }
  }

Answer 1

You can use the Redux-Forms that your code will look more elegant and better for future maintenance, see an example of validation with Redux-form:

https://redux-form.com/7.3.0/examples/syncvalidation/

If you have limitations and you can’t use Redux-Forms, you can use the state to do this control if you need or post an example here.

Answer 2

The ideal is to use status. It starts with the state so that the message is not visible. The most appropriate place to do this is in the builder that has not yet defined:

export default class LoginApp extends React.Component {
    constructor(props){
        super(props);
        this.validarEmail = this.validarEmail.bind(this);
        this.state = {
            valido: false //iniciar estado de valido a falso (escondido)
        };
    }

Then when validating the email changes the status of valido for true:

validarEmail=(e)=>{
     e.preventDefault();
     const email = e.target.elements.email.value;
     const password = e.target.elements.password.value.length;
     const emailValid = validator.isEmail(email)
     if(emailValid === false){
       console.log('email incorreto, favor verificar')
     }else if(password < 8 ){
        console.log('senha é muito curta, favor informar uma de maior numero de caracteres')
     }else{
       console.log('email e senha corretos')
       this.setState(() => { /*altera o estado aqui*/
           return { valido: true };
       });
     }
}

In the render now shows the message only if valido is true. To simplify you can use the operator && which is the most common in React:

render() {  
  return (
    <div>
    <Header />
    ...
    { this.state.valido && <p>b</p> }
    ...