CODEWITHSUNDEEP
reactjsreact-nativeexpo
ashblossom
ashblossom

Reputation: 555

How to hide error text on react native using helper text

I want to hide this error text and showing again when button is clicked here is some source code

  const EmailError = () => {
  return !this.state.UserEmail.includes('@');
  };

<TextInput style={styles.nameInput} 
      placeholder="Email" 
      onChangeText={UserEmail => this.setState ({UserEmail, UserEmail}) }
      keyboardType="email-address"
      >
      </TextInput>
      <HelperText type="error" visible={EmailError()}>
    Email cannot be empty!
  </HelperText>

Any solution for this problem? thank you

Upvotes: 1

Views: 971

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

This might help

state = {
UserEmail: ‘’,
showError: false
}

const EmailError = () => {
  return !this.state.UserEmail.includes('@');
  };

validate(){

  this.setState ({showError: this.state.UserEmail === “”})

}

<TextInput style={styles.nameInput} 
      placeholder="Email" 
      onChangeText={UserEmail => this.setState ({UserEmail: UserEmail}) }
      keyboardType="email-address"
      value={this.state.UserEmail}  
      >
      </TextInput>
      <HelperText type="error" visible={this.state.showError}>
    Email cannot be empty!
  </HelperText>
<Button onPress={() => this.validate() }>Validate</Button>

Upvotes: 3

Related Questions