Estoy usando una API de la NASA para representar imágenes e información multimedia en una página. Quiero agregar un botón que "guarde" la imagen en una matriz de favoritos. ¿Cómo haría esto? En este momento, lo tengo para que cuando se haga clic en un botón, se duplique toda la matriz en lugar de un solo objeto de la API.
import React, { useState, useEffect } from "react"; const apiKey = process.env.REACT_APP_APOD_KEY; function Main() { const [media, setMedia] = useState([]); const [faves, setFaves] = useState([]); const mediaGet = () => { fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=10`) .then(res => res.json()) .then(result => { setMedia(result) }) } const addFave = (media) => { const newFavesList = [...faves, media]; setFaves(newFavesList); // make this function add to faves array (new array) }; useEffect(() => { mediaGet() }, []) console.log(media); return ( <> <h1>Clever name here</h1> {/* move this to Card component */} {media.map((media) => ( <div key={media.id}> <h2>{media.title}</h2> <h3>{media.date}</h3> <img src={media.url} alt={media.title} /> <button onClick={addFave} type="button">Add to array</button> </div> ))} </> ) } export default Main;Su función addFave requiere un argumento ( media ), pero la está llamando con onClick={addFave} que solo pasará el Event clic cuando se le llame.
Para pasar el objeto media desde la devolución de llamada de su mapa , use
onClick={() => addFave(media)} También cambiaría el controlador para usar la versión funcional del setter useState
const addFave = (fave) => { setFaves(prev => [...prev, fave]) }FYI, intente evitar el sombreado (reutilizar nombres de variables en diferentes ámbitos). Incluso hay una práctica regla ES-lint para esto ~ https://eslint.org/docs/rules/no-shadow
{media.map(item => ( <div key={item.id}> <h2>{item.title}</h2> <h3>{item.date}</h3> <img src={item.url} alt={item.title} /> <button onClick={() => addFave(item)} type="button">Add to array</button> </div> ))}