CODEWITHSUNDEEP
javascriptreactjsreact-native
DevGe
DevGe

Reputation: 1449

How to fix undefined is not an object on setState in react native

I'm currently new in react native, I was wondering when I type on Input text of native base, the error shows undefined is no an object (evaluating e.target.value) why does e.target.value error?

My Goal: when the _onPressButton press the state that I type will alert

I will show guys my sample code that I created

    class WelcomeScreen extends Component {

  constructor(props) {
    super(props);

    this.state = {
      usernameInput:'',
      passwordInput:'',
    }

    this._onPressButton = this._onPressButton.bind(this);
    this._handleUsername = this._handleUsername.bind(this);
    this._handlePassword = this._handlePassword.bind(this);
  }


  _onPressButton() {
    alert(this.state.usernameInput);
  }

  _handleUsername = (e) => {
    this.setState({
      usernameInput:e.target.value
    })
  }

  _handlePassword = (e) =>  {
    this.setState({
      passwordInput:e.target.value
    })
  }

   render() {
     return (
      <Container>

        <View>
            <Image resizeMode="contain" style={{width: '100%', height: '40%',marginTop:'20%'}} 
              source={require('../Tracker/android/Assets/deliveryman.png')} />
        </View>

        <View style={{bottom:70,alignItems:'center',justifyContent:'center'}}>

          <Item rounded style={{width:'80%', borderRadius: 5, height:40}}>
            <Input placeholder="Username" 
            value={this.state.usernameInput} 
            onChangeText={this._handleUsername}
            style={{fontFamily: 'Gill Sans',}} />
          </Item>

          <Item rounded style={{width:'80%',marginTop:20,borderRadius: 5, height:40}}>
            <Input placeholder="Password" 
            value={this.state.passwordInput} 
            onChangeText={this._handlePassword} 
            secureTextEntry={true} 
            style={{color:'blue',fontFamily: 'Gill Sans'}}/>
          </Item>

          <LinearGradient 
            start={{x: 1, y: 0}} 
            end={{x: 0, y: 0}} 
            colors={['#2C73D2', '#008E9B']} 
            style={styles.linearGradient}>
            <TouchableOpacity onPress={this._onPressButton}>
            <Text style={styles.buttonText}>
              Login
            </Text>
            </TouchableOpacity>
          </LinearGradient>
        </View>

        <View style={{width:'100%',justifyContent:'center',alignItems:"center",marginTop:50}}>
          <Text style={{fontWeight:'300',fontFamily: 'Gill Sans',}}>© 2019 Hi-Flyer Food. </Text>
          <Text style={{fontWeight:'300',fontFamily: 'Gill Sans',}}>Designed by Solutions Experts and Enablers, Inc.</Text>
        </View>

      </Container>
     )
   }
}

Upvotes: 2

Views: 2175

Answers (1)

Vencovsky
Vencovsky

Reputation: 31585

React Native isn't like Reactjs where you need to get e.target.value.

In onChangeText the value passed in the function is already the text value.

Take a look at the docs.

Change this

  _handleUsername = (e) => {
    this.setState({
      usernameInput:e.target.value // e is the text from the input
    })
  }

  _handlePassword = (e) =>  {
    this.setState({
      passwordInput:e.target.value // e is the text from the input
    })
  }

To 

  _handleUsername = usernameInput => {
    this.setState({ usernameInput }) // setState with the text from the input
  }

  _handlePassword = passwordInput =>  {
    this.setState({ passwordInput }) // setState with the text from the input
  }

Upvotes: 3

Related Questions