Aquí está el código relevante:
const Members = () => { // array of each video in selected grade const videosMap = (videos) => { return videos.map((video) => ( <VideoCard key={video.id} thumbnail={video.thumbnail} title={video.title} description={video.description} onClick={() => { handleVideoClick(); }} /> )); }; // updates state of shown videos & page heading const handleGradeButtonClick = (videos, heading) => { setShowVideos(videosMap(videos)); setVideosHeading(heading); }; const handleVideoClick = () => { console.log("test"); }; // controls state of which grade's videos to show const [showVideos, setShowVideos] = useState(videosMap(kinder_videos)); // controls states heading to display depending on selected grade const [videosHeading, setVideosHeading] = useState("Kindergarten"); const [showVideoDetails, setShowVideoDetails] = useState(null);handleVideoClick es la función que no funciona cuando hago clic en uno de los componentes de VideoCard asignados.
Aquí está el código completo si desea verlo: https://github.com/dblinkhorn/steam-lab/blob/main/src/components/pages/Members.js
Cuando miro en React DevTools uno de los componentes de VideoCard, muestra lo siguiente:
onClick: *f* onClick() {}
Si no lo envuelvo en una función de flecha, se ejecuta, pero al cargar el componente en lugar de al hacer clic. Tengo la sensación de que tiene algo que ver con mi uso de .map para representar este componente, pero no he podido resolverlo.
¡Gracias por cualquier ayuda!
No hay problema con su método de mapeo, solo necesita pasar el método onClick como accesorio a su componente VideoCard:
En su componente VideoCard, haga esto:
const VideoCard = (props) => { const { thumbnail, description, title, onClick } = props; return ( <div className="video-card__container" onClick={onClick}> <div className="video-card__thumbnail"> <img src={thumbnail} /> </div> <div className="video-card__description"> <div className="video-card__title"> <h3>{title}</h3> </div> <div className="video-card__text">{description}</div> </div> </div> ); }; export default VideoCard;