javascript - How to make the right conditions using firebase authentication in react native? -

i created simple form using firebase authentication react native. when try, state show success failed auth.

success label appear before followed failed label. although in fact same enter wrong password correct email.

here code :

//import libraries import react, { component } 'react'; import { view, text, toastandroid } 'react-native'; import { button, card, cardsection, input, spinner } './common'; import firebase 'firebase';  // create component class loginform extends component {      state = { email: '', password:'', error: '', success: '', loading: false };      onbuttonpress() {          const {email, password} = this.state;          if(this.state.email == '') {             this.setstate({ error: 'email can not empty', loading: false });         } else if(this.state.password == '') {             this.setstate({ error: 'password can not emptyg', loading: false });         } else if(!this.validateemail(this.state.email)) {             this.setstate({ error: 'email not valid', loading: false });         } else {              this.setstate({ error: '', success: '', loading: true });              firebase.auth().signinwithemailandpassword(email, password)             .then(this.onloginsuccess())             .catch(() => {             firebase.auth().createuserwithemailandpassword(email, password)                 .then(this.onloginsuccess())                 .catch(() => {                     this.onloginfail()                 });             });         }     }      validateemail = (email) => {         var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/;             return re.test(email);     };      onloginfail() {         this.setstate({             error: 'authentication failed.',             loading: false,          });     }      onloginsuccess() {         this.setstate({             loading: false,              error: '',             email: '',             password: '',             success: 'authentication success.',         });     }      renderbutton() {         if(this.state.loading) {             return <spinner />;         }         return (             <button onpress={this.onbuttonpress.bind(this)}>log in</button>         );     }      rendererror() {         if(this.state.error) {             return <text style={styles.errortextstyle}>                 {this.state.error}             </text>;         }     }      rendersuccess() {         if(this.state.success) {             return <text style={styles.successtextstyle}>                 {this.state.success}             </text>;         }     }      render() {         return (             <view>                 <card>                     <cardsection>                         <input                             placeholder="email@gmail.com"                             label="email"                             value={this.state.email}                             onchangetext={ email => this.setstate({ email })}                         />                     </cardsection>                      <cardsection>                         <input                             securetextentry                             placeholder="password"                             label="password"                             value={this.state.password}                             onchangetext={ password => this.setstate({ password })}                         />                     </cardsection>                      { this.rendererror() }                      { this.rendersuccess() }                      <cardsection>                         { this.renderbutton() }                     </cardsection>                 </card>             </view>         );     } }  const styles = {     errortextstyle: {         fontsize: 15,         alignself: 'center',         color: 'red'     },     successtextstyle: {         fontsize: 15,         alignself: 'center',         color: 'green'     } };  //make component available app export default loginform; 

check state.error , state.success neither empty strings.

rendererror() {         if(this.state.error && this.state.error !== '') {             return <text style={styles.errortextstyle}>                 {this.state.error}             </text>;         }     }      rendersuccess() {         if(this.state.success && this.state.success !== '') {             return <text style={styles.successtextstyle}>                 {this.state.success}             </text>;         }     } 

the other option set null said values when setting them out, won't need not empty string condition.

also, use identity operators (===) instead of quality operators (==).

onbuttonpress() {          const {email, password} = this.state;          if(this.state.email === '') {             this.setstate({ error: 'email can not empty', loading: false });         } else if(this.state.password === '') {             this.setstate({ error: 'password can not emptyg', loading: false });         } else if(!this.validateemail(this.state.email)) {             this.setstate({ error: 'email not valid', loading: false });         } else {              this.setstate({ error: '', success: '', loading: true });              firebase.auth().signinwithemailandpassword(email, password)             .then(this.onloginsuccess())             .catch(() => {             firebase.auth().createuserwithemailandpassword(email, password)                 .then(this.onloginsuccess())                 .catch(() => {                     this.onloginfail()                 });             });         }     }