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><ScrollViewhorizontal={true}showsHorizontalScrollIndicator={false}pagingEnabled={true}
        ><Viewstyle={{flex:1,
               height:totalheight,
               justifyContent: "space-around",
               alignItems: "center",
               width:totalwidth,
               backgroundColor: "#FF0000"
             }}><TextInputstyle={{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"
          />