Print text entered in TextInput to console

Question

I want print the value which is entered in TextInput to console.

below is snippets from my code:

constructor(props) {
        super(props);
        this.state= {
            textValue: "",
        }
    }
    _textChange = (text) => {
        this.setState({
            textValue: text,
        })
        console.log(this.state.textValue);
}

AND:

<TextInput onChange={this._textChange.bind(this)}/>

I know that something is wrong with my code, but I am not able to figure it out. I just want to print the entered text in TextInput to be printed in console

Note

I have seen this answer. I am not able to understand the answers in the given link. I am very new to react-native. So please try to explain it the simple way.

There is any motivation to bing the method inside the onChange? — vincenzopalazzo, Jan 09 '21 at 11:37
you may want to do this: `onChangeText={this._textChange}` instead of using `onChange` — Nishant, Jan 09 '21 at 11:38

ARZMI Imad · Answer 1 · 2021-01-09T11:58:48.920

1

You should use onChangeText instead of onChange

<TextInput onChangeText={this._textChange}/>

if declare your method as a named function like below

    _textChange(text) {
        this.setState({
            textValue: text,
        })
     }

So you should use bind, because the this keyword will not refer to the component scope,but in your case it is not necessary.

Please take a look at this article to understand difference between named function and arrow function.

edited Jan 09 '21 at 11:58

answered Jan 09 '21 at 11:39

ARZMI Imad

950
5
8

It is necessary ti call .bind(this) inside the onChangeText? – vincenzopalazzo Jan 09 '21 at 11:40
Since you are using an arrow function it is not necessary – ARZMI Imad Jan 09 '21 at 11:43

zahra zamani · Answer 2 · 2021-01-09T12:15:49.837

1

setState() function in any component is asynchronous or is called after the completion of the function that it was called in.If you want to see the result of the console, you can do this:

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

edited Jan 09 '21 at 12:15

answered Jan 09 '21 at 11:41

zahra zamani

1,323
10
27

vincenzopalazzo · Answer 3 · 2021-01-09T13:14:23.803

You are missing something when you create a class but your error is inside the react event onChangeText instead of onChange, but I think you can avoid calling this._textChange.bind(this), this is used with another type of class declaration (see below). I like the following react class declaration, and maybe it can help to understand what is happening under the hood (if you are starting with react now)

class PComponern extends Component {

    constructor(props) {
        super(props);
        this.state= {
            textValue: "",
        };
       this._textChange = this._textChange.bind(this)
    }
 
  _textChange(text) {
    this.setState({
            textValue: text,
        });
    console.log(this.state.textValue);
  }   

  render (
    ...
    <TextInput onTextChange={this._textChange}/>
    ...
    )
   
}

This form can help you to start, but sometimes in not necessary call the this._textChange = this._textChange.bind(this) in the constructor, see also this reference

There are also a couple of comment that suggest the following things

you may want to do this: onTextChange={this._textChange} instead of using onChange.

Runnable code

Print text entered in TextInput to console

Note

3 Answers3