Estoy armando un conversor de criptomonedas en react, el cual está casi terminado. Pero el único inconveniente es que no me estaría funcionando bien el siguiente código con "template literals". Tampoco puedo acceder a la ruta de esos valores con utilizando la url en el navegador. Hay algo que no estoy teniendo en cuenta o es que no termino de entender algo? o debería buscar otra forma de asignar esos states ? ?
acá el código con el problema en cuestión:
useEffect(()=>{
if (fromCurrency !=null && toCurrency != null) {
fetch(`${cryptoUrl} ?current_price=${fromCurrency}&symbol=${toCurrency}` )
.then(res => res.json( ))
.then(data =>
setExchangeRate(data.current_price[toCurrency]) )
}
}, [fromCurrency, toCurrency])
acá dejo el código del componente completo con la api:
import React, {useState, useEffect} from 'react'
import CurrencyRow from './CurrencyRow'
const OtherCurrency = () => {
const cryptoUrl = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'
const [currencyOptions, setcurrencyOptions] = useState ([])
const [fromCurrency, setFromCurrency] = useState ()
const [toCurrency, setToCurrency] = useState ()
const [exchangeRate, setExchangeRate] = useState()
const [amount, setAmount] = useState (1)
const [amountInFromCurrency, setAmountInFromCurrency ] = useState (true)
let toAmount, fromAmount
if (amountInFromCurrency) {
fromAmount = amount
toAmount = amount * exchangeRate
} else{
toAmount = amount
fromAmount = amount / exchangeRate
}
const currencyApi = async () =>{
const response = await fetch(cryptoUrl)
const data = await response.json()
setcurrencyOptions([ data.map((name)=>name.symbol), data.map((price)=>price.current_price)])
setFromCurrency(data[0])
setToCurrency(data[2])
setExchangeRate(data[0].current_price)
// console.log(data.map((price)=> price.current_price))
// console.log(data.map((price)=> price.symbol))
}
useEffect(()=>{
currencyApi()
}, [])
useEffect(()=>{
if (fromCurrency !=null && toCurrency != null) {
fetch(`${cryptoUrl} ?current_price=${fromCurrency}&symbol=${toCurrency}` )
.then(res => res.json( ))
.then(data =>
setExchangeRate(data.current_price[toCurrency]) )
}
}, [fromCurrency, toCurrency])
function handleFromAmountChange(e){
setAmount(e.target.value)
setAmountInFromCurrency(true)
}
function handleToAmountChange(e){
setAmount(e.target.value)
setAmountInFromCurrency(false)
}
return (
<div className="currencies">
<CurrencyRow
currencyOptions={currencyOptions}
selectCurrency={fromCurrency}
onChangeCurrency={e => setFromCurrency(e.target.value)}
onChangeAmount={handleFromAmountChange}
amount={fromAmount}
/>
<div>=</div>
<CurrencyRow
currencyOptions={currencyOptions}
selectedCurrency={toCurrency}
onChangeCurrency={e => setToCurrency(e.target.value)}
onChangeAmount={handleToAmountChange}
amount={toAmount}
/>
</div>
)
}
export default OtherCurrency
desde ya muchas gracias.