onChange react native

Question

I have a problem, when I put the user : 1 and password 123 appears to me in console empty strings and I do not understand why someone can help me?

export default class App extends React.Component {

  // Setting up Login Activity title.
  constructor(props) {
    super(props)
    this.state = { UserName: '',Userpassword: ''}

    this.login = this.login.bind(this);
    this.onChange = this.onChange.bind(this)

  }


onChange(e) {
  this.setState({ [e.target.name]: e.target.value });
  console.log(this.state);
}



<TextInput

          placeholder="Enter User Name"  
       
          onChange={this.onChange}

          underlineColorAndroid='transparent'

          style={styles.TextInputStyleClass}

        />

 <TextInput

     
          placeholder="Enter Password"

         
           onChange={this.onChange}
       
          underlineColorAndroid='transparent'

          style={styles.TextInputStyleClass}
          secureTextEntry={true}

        />

I add a friend of the console output of my code, user: 1 , password:123´

my Out

Answer 1

Issue

1. The onChange event doesn't have a name property to destructure from event.target. name is undefined and resolves to the third key "".
2. React state updates are asynchronous, so you can't console log the updated state in the same render cycle the update is enqueued in. Notice all your console logs are a "cycle" behind the onChange event.

Solution

Restructure your onChange callback be a curried function. Attach to the onChangeText prop so the text value is passed, and provide a "name" value for the TextInput that matches the state it is updating.

onChange = name => value => {
  this.setState({ [name]: value });
}

...

<TextInput
  placeholder="Enter User Name"  
  onChangeText={this.onChange('UserName')}
  underlineColorAndroid='transparent'
  style={styles.TextInputStyleClass}
/>

To log the updated state use the componentDidUpdate lifecycle method.

componentDidUpdate() {
  console.log(this.state);
}