React Native TextInput sends input on second press

Guys i’m new to React Native and also not good at JavaScript. In my app i have 2 TextInput and a Pressable button but the output is not making sense. I’ve tried to change timing of execution of some lines but result is the same.

I’m using: expo, react native 0.68.2, android api 30 (Android Studio)

output:

Android Bundling complete 32ms

First click

LOG description :

LOG identity :

Second click

LOG description :sadasdas

LOG identity :12345678910

Report.js

export default function Report({ route, navigation }) {
  const [enteredText, setEnteredText] = useState("");
  const [enteredId, setEnteredId] = useState("");

  const [description, setDescription] = useState("");
  const [identity, setIdentity] = useState("");

  function descriptionInputHandler(enteredText) {
    setEnteredText(enteredText);
    //console.log("entered text :" + enteredText);
  }

  function identityInputHandler(enteredId) {
    setEnteredId(enteredId);
    //console.log("entered id :" + enteredId);
  }

  function buttonHandler() {
    setDescription(enteredText);
    setIdentity(enteredId);
    setEnteredText("");
    setEnteredId("");
    console.log("description :" + description);
    console.log("identity :" + identity);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{category}</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.longTextInput}
          placeholder="Describe your situation, don't worry we are here."
          onChangeText={descriptionInputHandler}
          value={enteredText}
        />
        <TextInput
          style={styles.textInput}
          placeholder="What is your identity number."
          onChangeText={identityInputHandler}
          value={enteredId}
        />
        <Pressable style={styles.button} onPress={buttonHandler}>
          <Text style={styles.text}>Send report!</Text>
        </Pressable>
      </View>
    </View>
  );
}

Answer

Try something like that instead :

     function buttonHandler() {
    setDescription(enteredText);
    setIdentity(enteredId);
  }

 useEffect(() => {
    console.log("description :" + description);
    console.log("identity :" + identity);
    setEnteredText("");
    setEnteredId("");
    }, [description, identity]);

The useEffect should be triggered twice since both description and identity are in the dependency array but it’s a good start to manage the asynchronous behavior of useState.

Advertisement

Answer