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.
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