Estoy creando una aplicación criptográfica y quiero cambiar dinámicamente todos los datos de acuerdo con la moneda en la que hago clic dentro de un menú desplegable.
Esta es la función que utilizo para obtener todos los datos del gráfico de mercado
getMarketData = async (currency) => { try { const { data } = await axios.get( `https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=${currency}&days=30&interval=daily` );Necesita dos estados: uno para almacenar la moneda seleccionada y otro para almacenar los datos devueltos por la API.
Agregue un controlador al elemento de select para detectar eventos de cambio. Use el valor de la opción seleccionada como la variable que usa para la moneda en su URI.
Cuando se devuelvan sus datos, actualice el estado de los data
Solo si tienes datos muéstralo.
Este ejemplo usa una API simulada para devolver algunos datos.
const { useEffect, useState } = React; // Mock data const data = { cz: [1, 3, 5], en: [10, 12, 20], de: [45, 32, 34] }; // Mock API that returns data after a second function mockApi(currency) { return new Promise((res, rej) => { setTimeout(() => res(data[currency]), 1000); }); } function Example() { // Two states initialised with an empty array // for the data, and an empty string for the currency const [ data, setData ] = useState([]); const [ currency, setCurrency ] = useState(''); // On the initial render update // currency state useEffect(() => { setCurrency('de'); }, []); // When the currency state is updated // call the API useEffect(() => { if (currency) { mockApi(currency).then(data => setData(data)); } }, [currency]); // When a new currency is selected // update the currency state with the value // from the option function handleChange(e) { const { value } = e.target; setCurrency(value); } // Show the select element and add a change // handler to it. If there's data create a list, // otherwise show a loading/error message return ( <div> <select onChange={handleChange}> <option disabled>Choose currency</option> <option value="en" selected={currency === "eu"}>EN</option> <option value="de" selected={currency === "de"}>DE</option> <option value="cz" selected={currency === "cz"}>CZ</option> </select> {data.length ? ( <ul>{data.map(el => <li>{el}</li>)}</ul> ) : <div>No data</div>} </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>