reactjsreact-nativeaxioscryptocurrency

Why the result is not shown?


I'm trying to implement a simple currency conversor. I give a value in bitcoin and then I expect the value in BRL(Brazilian currency). But, anyway, I call useEffect to get me the current rate and then, in another function, I do the multiplication of amount(value, in the code) and the rate. Here is the code:

import { View, Text, Pressable, StyleSheet, Button, TextInput } from 'react-native';
import {useState, useEffect} from 'react'
import axios from 'axios'
// You can import supported modules from npm

// or any files within the Snack

export default function App() {
  
  const[valor, setValor] = useState('');
  const[resultado, setResultado] = useState(0);

  useEffect( () => {
    async function fetchBitcoinPrice() {
    axios.get('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=brl').then(response => {
     const result = valor * response.data.bitcoin.brl
      setResultado(result)
    })    
    

   
    }
    fetchBitcoinPrice();
  },[valor])
  
  const converterBTC = (valorAtual) =>{
      const quantidade = parseFloat(valor);
      if(!NaN(quantidade)){
      setResultado(resultado*valor);
      }
      else{
        console.log("Entre com uma quantidade valida")
      }
    //return setResultado
  }

  return (
    <View style = {styles.container}>
    <TextInput defaultValue = {valor} style = {styles.caixaTexto} placeholder = "Quantidade de SATS ou BTC" keyboardType = 'number-pad' onChangeText = {converterBTC}>
                  </TextInput>
      <View style = {styles.botoes}>


      </View>
            
      <Text>
      R${resultado}
      </Text>
    </View>
    
  );
}

const styles = StyleSheet.create({
 botoes:{
    flexDirection: 'row',
    margin: '50px',
    elevation: 3
 },
  botao:{
    backgroundColor: '#d3d3d3',
    width: 60,
    height: 30,
    borderRadius: 10,
    margin: 40,
    elevation: 20
  },
  textoBotao:{
    color:'#ffffff',
    textAlign: 'center',
     
    
  },
  caixaTexto:{
    width: 200,
    height: 40,
    borderRadius: 40,
    borderStyle: 'solid',
    borderColor: 'orange',
    borderWidth: 2,
    marginLeft: 50,

    elevation: 10


  },
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  
});
`````````
Also, I want to know what I can use to show message error in react native, something similar to Toast on Android.

Solution

  • Your valor is always empty string in your example

    First, you need to change TextInput

    <TextInput
      value={valor}
      style={styles.caixaTexto}
      placeholder="Quantidade de SATS ou BTC"
      keyboardType='number-pad'
      onChangeText={value => setValor(value)}
    />
    

    Changing value of valor by TextInput causes recalculating useEffect, and resultado will be changed, and in such case converterBTC is useless

    But if you need some validation of entered text -> you can move checkings to useEffect