React Native: Text input onChangeText doesnt trigger my function-CodePudding

i currently have a TextInput where the user is supposed to enter a number, when user enters a value i would like to make an instant calculation based on the value entered. i created a function and within this function the calculation is made. I tried running the function when the text in my TextInput changes but it is not getting triggered.

function EnterAmountScreen() {

  const[am1,Setam1]=useState(0)
  const[am2,Setam2]=useState(0)

  const handleAmount=async({
    amount1,amount2}) => {
        Setam1(amount1);
        Setam2(amount2);
    
    console.log("Total amount: "  am1  "." am2);
};

const handleCalculation =()=>{

      const add = (num1, num2) => {
        return num1   num2;
      };

      let resuladd = add(Number(am1), Number(am2));
      console.log(" :",resuladd);

       }

return(
    <AppForm
    initialValues={{ 
        amount1:"",
        amount2:"",
    }}
    onSubmit={handleAmount}
  >
      <View> 
      <View>
      <TextInput
      name="amount1"
      length={4}
      autoCorrect={false}
      autoFocus
      keyboardType="ascii-capable"
      placeholder="0000"
      keyboardType="numeric"
      selectTextOnFocus = {false}
      />
       <Text>.</Text>
      <TextInput
        name="amount2"
        autoCorrect={false}
        placeholder="00"
        keyboardType="numeric"
        **onChangeText={handleCalculation}**
      />
      </View>
    </View>
  </AppForm>

I am updating my code below trying to use useEffect to render every time my am1 changes.

function EnterAmountScreen() {

  const[am1,Setam1]=useState(0)
  const[am2,Setam2]=useState(0)

  const handleAmount=async({
    amount1,amount2}) => {
        Setam1(amount1);
        Setam2(amount2);
    
    console.log("Total amount: "  am1  "." am2);
};

const handleCalculation =()=>{

      const add = (num1, num2) => {
        return num1   num2;
      };

      let resuladd = add(Number(am1), Number(am2));
      console.log(" :",resuladd);
       }

useEffect(() => {
      Setam1(am1);
      console.log('am1',am1)
   }, [am1])

return(
    <AppForm
    initialValues={{ 
        amount1:"",
        amount2:"",
    }}
    onSubmit={handleAmount}
  >
      <View> 
      <View>
      <TextInput
      name="amount1"
      length={4}
      autoCorrect={false}
      autoFocus
      keyboardType="ascii-capable"
      placeholder="0000"
      keyboardType="numeric"
      selectTextOnFocus = {false}
      />
       <Text>.</Text>
      <TextInput
        name="amount2"
        autoCorrect={false}
        placeholder="00"
        keyboardType="numeric"
        **onChangeText={(text)=>Setam1({am1:text})}**
      />
      </View>
    </View>
  </AppForm>

CodePudding user response：

Try to call it in the appropriate format :

<TextInput
        name="amount2"
        autoCorrect={false}
        placeholder="00"
        keyboardType="numeric"
        onChangeText={const add = (num1, num2) => {
                       return num1   num2;};
                       let resuladd = add(Number(am1), Number(am2));
                       console.log(" :",resuladd);}
      />

CodePudding user response：

It actually triggers the function. The issue is that the states(am1 & am2) are not up to date in order to perform the calculation and offer the accurate answer.

The code below operates in the manner you specified in the description. Take a look!

function EnterAmountScreen() {   
    const [am1, Setam1] = React.useState(0);
      const [am2, Setam2] = React.useState(0);
      const [sum, setSum] = React.useState(0);
    
      const handleCalculation = value => {
        const add = (num1, num2) => {
          return num1   num2;
        };
        Setam2(value);
        let resuladd = add(Number(am1), Number(value));
        setSum(resuladd);
        console.log(' :', resuladd);
      };
    
    return (
    <View>      
     <TextInput
            name="amount1"
            length={4}
            autoCorrect={false}
            autoFocus
            keyboardType="ascii-capable"
            placeholder="0000"
            keyboardType="numeric"
            selectTextOnFocus={false}
            onChangeText={value => Setam1(value)}
          />
          <TextInput
            name="amount2"
            autoCorrect={false}
            placeholder="00"
            keyboardType="numeric"
            onChangeText={handleCalculation}
          />
          <Text>Total sum is</Text>
          <Text>{sum}</Text>
    <View> 
    )}