Tengo una aplicación de reacción en la que obtengo datos de la API de coingecko. Pude mostrar todos los datos usando .map y pude filtrar las criptomonedas según lo que el usuario escribe en la barra de búsqueda. Con este:
function FetchCrypto() { const [coins, setCoins] = useState([]); const [search, setSearch] = useState(''); useEffect(() => { axios .get( 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false' ) .then(res => { setCoins(res.data); console.log(res.data); }) .catch(error => console.log(error)); }, []); // this basically just fetches the data and stores it in Coins state const handleChange = e => { setSearch(e.target.value); }; // update search state to filter for coins (based on what user typed into searchbar) const filteredCoins = coins.filter(coin => coin.name.toLowerCase().includes(search.toLowerCase()) ); // this is to filter the array of data, and display "bitcoin" if user types in "bitcoin" instead of displaying the entire database return ( <div className='coin-app'> <div className='coin-search'> <h1 className='coin-text'>Search a currency</h1> <br></br> <form> <input className='coin-input' type='text' onChange={handleChange} placeholder='Search' /> </form> </div> {filteredCoins.map(coin => { return ( <Coin key={coin.id} name={coin.name} price={coin.current_price} symbol={coin.symbol} image={coin.image} priceChange={coin.price_change_percentage_24h} /> ); })} </div> ); } export default FetchCrypto;Sin embargo, en lugar de mapear toda la base de datos y mostrarla. Quiero darles a los usuarios la posibilidad de elegir algunas entradas (cryptos) y guardarlas para que no tengan que revisar todo para ver lo que les interesa.
Estaba pensando en .push() los datos de filteredCoins en una matriz y luego usar LocalStorage para conservar el estado. No estoy muy seguro de cómo manejar esto.
así es como se ve hasta ahora después de ser mapeado (los botones de actualización y eliminación en la esquina de cada entrada aún no funcionan... pero me gustaría agregar un botón + para darle la funcionalidad de la que acabo de hablar)
al presionar agregar hacer localStorage.setItem("nombre",valor) y luego puede acceder a él a través de localStorage.getItem("nombre")