CODEWITHSUNDEEP
javascriptreact-nativetextinput
hehexd2222
hehexd2222

Reputation: 1

React-native TextInput value receiving object but I am clearly passing it a string?

state={username:"",password:""}

...

<TextInput style={styles.inputStyle}
    placeholder='[email protected]' 
    autoCorrect={false}
    value={this.state.username}
    onChange={text =>{ 
        this.setState({username:text});
        console.log(this.state.username);
    }}
/>

The error I'm getting is value is being passed an object, and it cites the line this textInput begins, but I don't see how this is possible

Styles is just: 

let styles ={
    titleStyle:{
      fontWeight:'bold',
      fontSize: 20,
      textAlign:'center'
    },
    inputStyle:{
      backgroundColor:'#d4d4d4'
    }
}

Inside the render.

Upvotes: 0

Views: 1025

Answers (3)

MorLavender
MorLavender

Reputation: 106

Try to this code: onChange={this.onUserChange}

onUserChange = (e, {value}) => { if (value) this.setState({username:value}) }

Upvotes: 0

Mateo Guzm&#225;n
Mateo Guzm&#225;n

Reputation: 1356

The onChange will return you an object, if you use onChangeText, it will return the value directly.

<TextInput 
    style={styles.inputStyle}
    placeholder='[email protected]' 
    autoCorrect={false}
    value={this.state.username}
    onChangeText={text => this.setState({ username: text })}
/>

Or, if you want to use the onChange you can do it in this way:

<TextInput 
    style={styles.inputStyle}
    placeholder='[email protected]' 
    autoCorrect={false}
    value={this.state.username}
    onChange={event => this.setState({ username: event.target.value })}
/>

Read React Native - Difference between onChange vs onChangeText of TextInput

Upvotes: 2

Yossi
Yossi

Reputation: 6027

Use onChangeText instead of onChange.

Upvotes: 1

Related Questions