import { useState } from "react"; function Image({ image }) { const [favourite, setFavourite] = useState([]); const storeFavourites = () => { setFavourite((gif) => [...gif, image]); console.log(favourite); }; const viewFavourites = () => { favourite.map((url) => { <img src={url} />; }); }; return ( <div> <img src={image} /> <button onClick={storeFavourites}>Like</button> <button onClick={viewFavourites}>View Favourites</button> </div> ); } export default Image;Este es un sitio giphy que genera un gif aleatorio cuando se carga y generará un gif diferente según los resultados de búsqueda. Hay un botón Me gusta para la imagen y fue capaz de almacenar la imagen como favoritos en un estado bajo const [favorito, establecer Favorito], sin embargo, no pude mostrar ninguna de las imágenes favoritas cuando hice clic en Ver favoritos.
Parece que está devolviendo la vista desde la función que no se usa en ninguna parte dentro de la función de retorno del componente, razón por la cual no se representa nada.
Esto es algo que podrías hacer:
Entonces, esto es lo que podrías cambiar:
import { useState } from "react"; function Image({ image }) { const [favourite, setFavourite] = useState([]); const [showFavourites, setShowFavourites] = useState(false); const storeFavourites = () => { setFavourite((gif) => [...gif, image]); console.log(favourite); }; const viewFavourites = () => { setShowFavourites(!showFavourites); }; return ( <div> <img src={image} /> <button onClick={storeFavourites}>Like</button> <button onClick={viewFavourites}>View Favourites</button> {showFavourites && favourite.map((url, index) => { <img src={url} key={index} })} </div> ); } export default Image; Si no desea alternar la vista, sino solo cambiarla una vez, puede cambiar la viewFavourites a esto:
const viewFavourites = () => { setShowFavourites(true); };