How do I sum two numbers in React Native?

Question

I'm trying out EXPO with my react projects, and getting started with the basics, and I got the calculator to work with a different copied code, but tried to do my own. Why is this not working?

import React, { useState } from 'react';
import { StyleSheet, View, Button, Alert, TextInput, Image, Input } from 'react-native';

export default function App() {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  const [total, setTotal] = useState(number1 + number2);

  function addTogether() {
    setTotal(number1 + number2);
    Alert.alert('Alert', 'Tulos: ' + total);
  }
   



  

  return (
    <View style={styles.container}>

      <TextInput type="number"
       placeholder='0' 
       value={number1} 
       onChange={e => setNumber1(+e.target.value)} 
       />
      <TextInput type="number"
      placeholder='0' 
      value={number2} 
      onChange={e => setNumber2(+e.target.value)} 
      />
      
      <Button onPress={addTogether} title="Tulos" />
      
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  image : {
    width: 250,
    height: 100
  },
  input : {
    width:200  , 
    borderColor: 'gray', 
    borderWidth: 1
  }
});

EXPECTED RESULT: (total)

RESULT: (NaN) or 0 Thank you for your help in advance! :)

question from:https://stackoverflow.com/questions/65928561/how-do-i-sum-two-numbers-in-react-native

Answer 1

It looks like there are 2 issues present in your example. Using the payload from onChange is being misused and the Alert is displaying the old total.

import React, { useState } from 'react';
import { StyleSheet, View, Button, Alert, TextInput, Image, Input } from 'react-native';

export default function App() {
    const [number1, setNumber1] = useState(0);
    const [number2, setNumber2] = useState(0);
    const [total, setTotal] = useState(number1 + number2);

    function addTogether() {
        const newTotal = number1 + number2;
        setTotal(newTotal);
        Alert.alert('Alert', 'Tulos: ' + newTotal); // total has the old value in the render
    }

    return (
        <View style={styles.container}>
            <TextInput
                type="number"
                placeholder="0"
                value={number1}
                onChangeText={v => {
                    setNumber1(Number.parseInt(v)); // Use parsed value from onChangeText
                }}
            />
            <TextInput
                type="number"
                placeholder="0"
                value={number2}
                onChange={e => {
                    setNumber2(Number.parseInt(e.nativeEvent.text)); // or get correct value from nativeEvent onChange
                }}
            />

            <Button onPress={addTogether} title="Tulos" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'space-evenly',
    },
    image: {
        width: 250,
        height: 100,
    },
    input: {
        width: 200,
        borderColor: 'gray',
        borderWidth: 1,
    },
});