How to change value of input react native

Question

Sorry I am new to React Native, and want to know how to change current input value?

As in my case, if I enter a new word directly into input the previous word or the previous value in the value will continue to appear without changing or replacing the new one.

Answer 1

class component:

Keep the value of the input in state of your component which holds this TextInput component.

class ParentComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = { queryText: '' }
  }

  handleInputTextChange = (newText) => {
    this.setState({ queryText: newText })
  }

  render () {
    return (<View>
      <TextInput 
        onChangeText={this.handleInputTextChange} 
        value={this.state.queryText}
      />
    </View>)
  }
}

Notice How I have used onChangeText and handleInputTextChange to handle new values.

Functional Component:

in the functional components, we use hooks. To hold and update text value we use useState

export default () => {
  const [text, setText] = useState("");

  return <TextView value={text} onChangeText={setText} />;
};

Answer 2

Hello you can use this method :

this.state = {
  email: '13119165220',
}
onChangeText={text => this.setState({ email: text })} 

Answer 3

In functional components use

export default () => {

const [text,setText] = React.useState("")

return <TextView
          value={text}
          onChangeText={setText} />
}

Answer 4

TextInput needs value that it is the value that is gonna be shown inside the TextInput.

And to update that value you use onChangeText that is gonna call whatever function you specify every time the text into the TextInput change.

Depending if you are learning React with hooks or without your code will change:

with hooks:

import React,{useState} from 'react'
//others import

function MyTextInput (props){
     const [userInput,setUserInput] = useState()
return (
   <TextInput 
        value = {userInput}
        onTextChange = {(text) => setUserInput(text)} /> //is always better call another function
    )                                                    // where you can validate the input

if your using class and coding without hooks, the logic is the same, just change the syntax:

import React,{Component} from 'react'
//other imports
class MyTextInput extends Component{
constructor(props){
   super(props)
   this.state = {
           userInput:''
   }
render(){
    return (
        <TextInput value = {this.state.userInput} 
             onChangeText = { text => this.setState({userInput:text}) />
    )
  }
}

Here the links for the docs, where you can find all the props that TextInput receive with explanation: https://reactnative.dev/docs/textinput