React Native TextInput SetState() Issue

I am having an issue with React Native's this.setState() within a TextInput's onChangeText. I am trying to display the content of the TextInput in the Text tag below it. However, i

Solution 1:

In your TextInput add value prop

<TextInput
 style={{height: 80, fontSize: 20}}
 placeholder="placeholder"
 value={this.state.searchtext}
 onChangeText={(searchtext) => this.setState({ searchtext })}
 ref={input => { this.textInput = input }}
 returnKeyType="go"
/>

Solution 2:

Hey you have used a variable to store screen code which is thisscreen. This might be preventing it from updating state.

Your render function should be like this:

 render () {
   return (
     <View>
        <ScrollView
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         pagingEnabled={true}
        >
             <View style={{
               flex: 1,
               height: totalheight,
               justifyContent: "space-around",
               alignItems: "center",
               width: totalwidth,
               backgroundColor: "#FF0000"
             }}>
             <TextInput
              style={{height: 80, fontSize: 20}}
              placeholder="placeholder"
              value={this.state.searchtext}
              onChangeText={(searchtext) => 
               this.setState({searchtext})}
              ref={input => { this.textInput = input }}
              returnKeyType="go"
             />
            <Text>{this.state.searchtext}</Text>
         </View>
      </ScrollView>
    </View>);
 }

Solution 3:

onChangeText={(search_text) => this.setState({searchtext:search_text})}

try this, that might do job.

Solution 4:

When you use setState, we provide a JSON as parameter. Please follow below code.

<TextInput
  style={{height: 80, fontSize: 20}}
  placeholder="placeholder"
  value={this.state.searchtext}
  onChangeText={(searchtext) => this.setState({ searchtext: searchtext })} // <-- 
  ref={input => { this.textInput = input }}
 returnKeyType="go"
/>

Do let me know if it does not work.

Solution 5:

I think there might bug in React onChangeText method. You just need to replace onChangetText to onChange then It will work fine.

  <TextInput
            style={{height: 80, fontSize: 20}}
            placeholder="placeholder"
            onChange={(text) => this.setState({searchtext : text})}
            ref={input => { this.textInput = input }}
            returnKeyType="go"
          />