CODEWITHSUNDEEP
javascriptreactjsreact-native
Eder
Eder

Reputation: 33

Change a text value after pressing a button

Sorry, i'm new to react native. How do i do to make a button who change the value of a input text or just a text property? I'm trying to create a Text and put below a global variable (imc) with {} but it doesnt work to change the {imc} for the variable result, so, what i need to do now? My code and sorry for the mess of it ah:

import React, {useState} from 'react';
import { StyleSheet, View, Text, SafeAreaView, StatusBar, TextInput, TouchableOpacity, Image} from 'react-native';

export default function App() {
 
const [altura, setAltura] = useState('');
const [peso, setPeso] = useState('');
const [idade, setidade] = useState('');
const mudarResultado=()=>{};




var imc = peso / (altura*altura/10000)

 function Calcular(){
  

alert(`Altura: ${altura}cm \nPeso: ${peso}kg  \nSeu imc: ${imc.toFixed(2)} `);

if (imc < 18.5 ){
 alert("Você está muito magro");
} else if (imc > 18.5 && imc < 25){
  alert("Você está com um peso normal");
}  else if (imc >= 25 && imc < 30){
  alert("Você está com sobrepeso");
} else {
  alert("Você está na faixa de obesidade");
}


 }
 
  return(
  <SafeAreaView style={styles.container}>
    <StatusBar />

    


    <Text style={styles.titulo}>CALCULE SEU IMC</Text>

    {/* campo de texto altura */}
    <TextInput 
     style={styles.input}
    placeholder='Altura(cm)'
    keyboardType='numeric'
    value={altura}
    onChangeText={(altura)=>setAltura(altura)}
    />


{/* campo de texto peso */}

<TextInput 
     style={styles.input}
    placeholder='Peso (kg)'
    keyboardType='numeric'
    value={peso}
    onChangeText={(peso)=>setPeso(peso)}
    />

    {/* campo de texto idade */}

    <TextInput 
     style={styles.input}
    placeholder='Idade (anos)'
    keyboardType='numeric'
    value={idade}
    onChangeText={(idade)=>setidade(idade)}
    />

{/* Button */}
<TouchableOpacity style={styles.botao}onPress={Calcular}>


  <Text style={styles.btn_txt}>CALCULAR</Text>
  
</TouchableOpacity>

<Text style={styles.ideal}>Resultado IMC</Text>
<Text>   IMC: {imc} </Text>```

Upvotes: 2

Views: 114

Answers (1)

Mateus Marinho
Mateus Marinho

Reputation: 352

I don't know if i understood your question, but, if you want to change a variable value, by pressing a button, you first have to put the variable in the "memory of the screen" that is, in the state, like you did in:

const [altura, setAltura] = useState('');

So you should do something like this

const [imc, setIMC] = useState(0);

And after, create a function that calculates the IMC, I recomend you always use arrow function because it prevents some bugs in the future.

    const CalculateIMC = () => {
         let imc = peso / (altura*altura/10000); // I used "let" instead of "var" because "let" only exists inside this function so it uses less memory. Think about largers aplications
         setIMC(imc); // Here you are setting the variable imc in the memory of yout screen
         // After this you can use your logic to determinates in what category the user is.
    }

After that you can delete this line

var imc = peso / (altura * altura / 10000)

Upvotes: 1

Related Questions