How to convert to int the “val” of the TextInput on the prop “OnChangeText”. React Native

user_14539074 0
Viewed 427

I am learning React Native and I am creating a simple application that performs the solutions of the quadratic formula.

The problem is at the moment when I capture the numbers in TextInput using the "onChangeText" prop. The react-native documentation says that the "onChangeText" prop returns a simple string value. That being said, I tried to convert the value of "onChangeText" to int using the parseInt () and Number () functions, but nothing worked and the result is always NaN.

Does anyone know how to convert the value of a TextInput to int?

const App = () => {
  
  var _a;
  var _b;
  var _c;
  var res1;
  var res2;

  const result = () => {

    Number(_a);
    Number(_b);
    Number(_c);

    res1 = -1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c)) / (2 * a);
    res2 = -1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c)) / (2 * a);

  }
  
  return (
    <>
      <ImageBackground source={image} style={styles.img}>
        <ScrollView>
          <View style={styles.title}>
            <Text style={styles.title_text}>
              Formula General 
            </Text>
          </View>
          <View style={{marginTop: 10}}>
            <View style={styles.container}>
              <Text style={styles.text}>
                Introduce el valor de A:
              </Text>
              <TextInput style={styles.textinput} placeholder='ej. 10' onChangeText={(val) => a_=val}></TextInput>
            </View>
            <View style={styles.container}>
              <Text style={styles.text}>
                Introduce el valor de B:
              </Text>
              <TextInput style={styles.textinput} placeholder='ej. 3' onChangeText={(val) => b_ = val}></TextInput>
            </View>
            <View style={styles.container}>
              <Text style={styles.text}>
                Introduce el valor de C:
              </Text>
              <TextInput style={styles.textinput} placeholder='ej. 3' onChangeText={(val) => c_set=val}></TextInput>
              <TouchableOpacity style={{backgroundColor:'#07057E', marginTop: 95, width: 100, marginLeft:0, position: 'absolute', paddingLeft: 20, paddingBottom:20, paddingRight: 20, paddingTop: 10}} onPress={operacion}>
                  <Text style={{color:'#fff', fontWeight:'bold', fontSize:11}}>Hacer Operacion</Text>
              </TouchableOpacity>
            </View>
          </View>
          <View style={{alignItems: 'flex-start', flexDirection:'column', justifyContent:'flex-start', position: 'absolute'}}>
              <View style={styles.result}>
                <Text style={styles.text}>
                  Resultado:
                </Text>
                <Text style={styles.res}>
                  Solucion 1: {res1}{'\n'}{'\n'}{'\n'}{'\n'}{'\n'}
                  Solucion 2: {res2}
                </Text>
              </View>
          </View>
        </ScrollView>
      </ImageBackground>
    </>
  );
};
react-native type-conversion
2 Answers

The result is NaN when the input is empty. You need to check the text val before using parseInt. if it is empty, you can return your default value. If this input is only for number, I think " keyboardType='numeric'" is better option.

user_145260380

You can use states. I've code yours in a different version. And square root of negative will result NaN. If you are to deal with larger bits, use BigInt.

import * as React from 'react';
import { useState } from 'react';
import { Text, View, StyleSheet,TextInput,Component } from 'react-native';
import Constants from 'expo-constants';
/* global BigInt */
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App()  {
  
  const [a,setA] = useState(1);
  const [b,setB] = useState(20);
  const [c,setC] = useState(-1);
  const [res1,setRest1] = useState(0);
  const [res2,setRest2] = useState(0);

  
  const result1 = () => {
    return -1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c)) / (2 * a);
  }
  const result2= () =>{
    return  BigInt(10**100);//Math.sqrt(-5);
  }
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Result 1:{result1()}
      </Text>
      <Text style={styles.paragraph}>
        Result 2:{result2().toString()}
      </Text>
      <TextInput placeholder='Input a Here' onChangeText={(val) => setA(val) }></TextInput>
      <TextInput placeholder='Input b Here' onChangeText={(val) => setB(val) }></TextInput>
      <TextInput placeholder='Input c Here' onChangeText={(val) => setC(val) }></TextInput>
      <Card>
        <AssetExample />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

https://snack.expo.io/@zawhtutwin/so_64585929

user_3797790
Related