Problem getting value of text input in react native

Question

I've tried to console.log the value of the text input but I get the error "undefined is not an object (evaluating 'this.state.inputValue')". What's the problem? Thank you!

class SearchScreen extends React.Component {
  state = {
    inputValue: "",
  };

  search() {
    console.log(this.state.inputValue);
  }

  render() {
    return (
          <View>
            <TextInput
              onChangeText={
                ((inputValue) => this.setState({ inputValue }),
                this.search)
              }
              value={this.state.inputValue}
            />
          </View>
    );
  }
}
export default SearchScreen;

Sennen Randika · Accepted Answer · 2020-07-31 12:37:06Z

1

The problem is in the way you've implemented it. Please try as below...

class SearchScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }

  search() {
    console.log(this.state.inputValue);
  }

  render() {
    return (
      <View>
        <TextInput
          onChangeText={(inputValue) => {
            this.setState({ inputValue });
            this.search();
          }}
          value={this.state.inputValue}
        />
      </View>
    );
  }
}

export default SearchScreen;

answered Jul 31, 2020 at 12:37

Sennen Randika

1,6763 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Unaidu Over a year ago

Thanks, it works. One last question: if I write in the input "hello" the console retrieves "hell" (the last word is always missing unless I type something else or click the spacebar). Do you know why?

Sennen Randika Over a year ago

@Unaidu Yes, that's because this.search() gives the result BEFORE the state value is updated. It takes a little time to update the state. (Microseconds) But, the search function is executed before the state is updated. So, you always see until one before last letter in your console. But, you don't need to worry. The state value is already updated.

Goulart · Accepted Answer · 2020-07-31 14:45:12Z

This problem occurred because two things.

First:

The this.setState is a async function.

If you pass a function after the setState this will work like a .then() in a promisse.

Second:

If you pass one function after another separating them by ',' the rightmost function will be executed first

You can resolve this doing something like that:

onChange={ inputValue => {
  this.setState({ inputValue });
  this.search();
}}

Or you can try something like that:

class SearchScreen extends React.Component {
  state = {
    inputValue: "",
  };

  search = () {
    console.log(this.state.inputValue);
  }

  setSearch = inputValue => {
    // The function 'search' will be execute after the state was set

    this.setState(
     { inputValue },
     () => this.search()
    );

  }

  render() {
    return (
          <View>
            <TextInput
              onChangeText={ inputValue => this.setSearch(inputValue) }
              value={this.state.inputValue}
            />
          </View>
    );
  }
}
export default SearchScreen;

Chandradeepta Laha · Accepted Answer · 2020-07-31 12:21:42Z

0

You didn't set the value of state property. provide a value to setState. this.setState({property : value})

answered Jul 31, 2020 at 12:21

Chandradeepta Laha

3842 silver badges7 bronze badges

1 Comment

gbalduzzi Over a year ago

You can use that syntax if the variable has the same name as the property, see here on 'New notations in ECMAScript 2015'

gbalduzzi · Accepted Answer · 2020-07-31 12:45:05Z

0

The problem is this line:

onChangeText={
    ((inputValue) => this.setState({ inputValue }),
    this.search)
}

You can use the short function notation only when your function has one statement:

(inputValue) => this.setState({ inputValue })

You actualy have 2 statements though, so you need to create a full function block using {}

(inputValue) => {
    this.setState({ inputValue })
    this.search()
}

answered Jul 31, 2020 at 12:45

gbalduzzi

10.4k3 gold badges36 silver badges65 bronze badges

Collectives™ on Stack Overflow

Problem getting value of text input in react native

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related