react native display input on real time

Question

I have a Text Input in React Native and I want to display the typed input on real time (two way binding ) in a way that when typing each letter in the input, the text under the input field is automatically updated with the letter typed. I want to achieve this without the use of state but this code doesn't work

export default function App() {


 const updateDisplay=(typedLetters)=> {return (<View><Text>typedLetters</Text></View>)}



return(
    <TextInput
              style={{height: 40,margin:20}}
              placeholder="Search"
              onChangeText={(text)=>updateDisplay(text)}
            />)
}

Answer 1

It is not possible to do this without state. Using state you provide a hook for the UI to know when to re-render your component. Without it, your UI will not re-render, and you won't see any difference.

Answer 2

First, updateDisplay should be like this:

 const updateDisplay = (typedLetters) => {
    return (
      <View>
        // notice argument is in {}
        <Text>{typedLetters}</Text>
      </View>
    );
  };

In order to show the text, you have to call the updateDisplay inside the component:

 return (
    <View>
      <TextInput
        style={{ height: 40, margin: 20 }}
        placeholder="Search"
        onChangeText={(text) => updateDisplay(text)}
      />
      {/* what parameter you are going to be passing to this function */}
      {updateDisplay()}

    </View>

The thing is when you defined the updateDisplay , it receives an argument. So somehow you need to extract the input value of TextInput component. That is why we need to use the state.

TextInput is actually a function and you cannot go inside of a function and grab a value. Inside a function, you mutate the state. we use setState because we are not setting the state, we are asking React and it decides when to set it.

export default function App() {
  const [text, setText] = useState(null);

  const updateDisplay = (typedLetters) => {
    return (
      <View>
        <Text>{typedLetters}</Text>
      </View>
    );
  };

  return (
    <View>
      <TextInput
        style={{ height: 40, margin: 20 }}
        placeholder="Search"
        // now save the input value to state. 
        onChangeText={(text) => setText(text)}
      />
      {/* what parameter you are going to be passing to this function */}
      {updateDisplay(text)}
    </View>
  );
}