TypeError: undefined is not an object (evaluating 'event.target.value')

Question

I'm working on a React Native project and I'm trying to make a Login form.

But I have some trouble to handle the text change in the TextInput.

My login form code

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  onLogin() {
    const { email, password } = this.state;
    Alert.alert('Credentials', `${email} + ${password}`);
  }

  handleChange(event) {
    this.setState({
      email: event.target.value,
      password: event.target.value,
    });
  }

  render() {
    const { email, password } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.form}>
          <Title>Connectez-vous</Title>
          <TextInput
            style={{ backgroundColor: '#f8f8ff' }}
            value={email}
            onChangeText={this.handleChange}
            label="Adresse email"
            mode="outlined"
          />
          <TextInput
            style={{
              backgroundColor: '#f8f8ff',
            }}
            value={password}
            onChangeText={this.handleChange}
            label="Mot de passe"
            mode="outlined"
            secureTextEntry
          />
          <Button
            mode="outlined"
            onPress={() => this.onLogin}
            style={{ marginTop: '5%', marginHorizontal: '25%' }}
          >
            Connexion
          </Button>
        </View>
      </View>
    );
  }
}

When I try to write something in the TextInput I got the error : TypeError: undefined is not an object (evaluating 'event.target.value').

Answer 1

Just try with below code::

handleChange(inputText) {
    this.setState({
      email: inputText,
    });
}

handleEmailChange(inputText) {
    this.setState({
      email: inputText,
    });
}

handlePasswordChange(inputText) {
    this.setState({
      password: inputText,
    });
}

<TextInput
        style={{ backgroundColor: '#f8f8ff' }}
        value={email}
        onChangeText={this.handleChange}
        label="Adresse email"
        mode="outlined"
/>

or you can use like this also

<TextInput
        style={{ backgroundColor: '#f8f8ff' }}
        value={email}
        onChangeText={(email) => { this.setState({ email }) }}
        label="Adresse email"
        mode="outlined"
/>

<TextInput
        style={{ backgroundColor: '#f8f8ff' }}
        value={email}
        onChangeText={(password) => { this.setState({ password}) }}
        label="Password"
        mode="outlined"
/>

I think this will work.. I have updated the onChangeText props