CODEWITHSUNDEEP
javascriptreactjsreact-native
Unaidu
Unaidu

Reputation: 73

Problem getting value of text input in react native

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;

Upvotes: 0

Views: 413

Answers (4)

Goulart
Goulart

Reputation: 134

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;

Upvotes: 1

gbalduzzi
gbalduzzi

Reputation: 10166

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()
}

Upvotes: 0

Sennen Randika
Sennen Randika

Reputation: 1636

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;

Upvotes: 1

Chandradeepta Laha
Chandradeepta Laha

Reputation: 386

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

Upvotes: 0

Related Questions