React Native console log proxy object

Question

I was following a react-native tutorial, but I encounter some weird result.

Here is the code

module.exports = React.createClass({
  getInitialState(){
    return({
      tasks: ['Take Course', "Clean house"],
      task: ''
    })
  },
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.header}>
          ToDoList
        </Text>
        <TextInput
          style = {styles.inputbox}
          placeholder="Type task"
          onChange={(text) => {
            this.setState({task: text});
            console.log(this.state.task);
          }}
        />
      </View>
    )
  }
}) 

I want to use console.log to print text which is coming from TextInput.

Here is the simulator.

I was expecting that it will print 1, 12 and 123 in chrome console.

But I got this

Why it prints this proxy object, and what is this object?

Answer 1

Use onChangeText instead of onChange. Take a look at https://facebook.github.io/react-native/docs/textinput.html

Moreover this.setState is an asynchronous call, that means it is undetermined when state will be set. In that case you have to call console.log as a callback to be sure that state has changed.

this.setState({
   task: text
}, () => {
   console.log(this.state.task)
})