Tengo una lista de películas que obtuve de una API y las mostré usando el método Map, estoy tratando de trabajar en una opción que cuando paso el mouse sobre una de las tarjetas quiero mostrar el avance de esa película específica en el lugar de la imagen. El problema al que me enfrento es cuando paso el mouse, el avance del video se reproduce en todas las tarjetas, me gustaría saber cómo puedo reproducir ese video al pasar el mouse para una tarjeta específica.
Componente de mi tarjeta
const MovieCard = ({moviesList}) => { const [isHover, setIsHover] = useState(false); const trailer = "https://player.vimeo.com/external/371433846.sd.mp4?s=236da2f3c0fd273d2c6d9a064f3ae35579b2bbdf&profile_id=139&oauth2_token_id=57447761"; return ( moviesList.map((singleMovie)=> { const {id , title, poster_path, overview} = singleMovie; return ( <article key={id} className="card" onMouseEnter= {()=> setIsHover(true)} onMouseLeave={()=> setIsHover(false)}> <img src={`${ImgPath}` + poster_path} alt={title} className="image"/> {isHover && <video src={trailer} autoPlay={true} loop></video>} <div className="body-card"> <h1>{title}</h1> <p>{`${overview.substring(0,200)}...`}</p> </div> </article> ) }) ) }exportar MovieCard por defecto
En lugar de una bandera boolean , puede almacenar la id y, francamente, esta funcionalidad debe ir en la Card individual y debe representar esa Card en el bucle.
Así es como puede hacerlo en la misma implementación.
const MovieCard = ({moviesList}) => { const [selected, setSelected] = useState(null); const trailer = "https://player.vimeo.com/external/371433846.sd.mp4?s=236da2f3c0fd273d2c6d9a064f3ae35579b2bbdf&profile_id=139&oauth2_token_id=57447761"; return ( moviesList.map((singleMovie)=> { const {id , title, poster_path, overview} = singleMovie; return ( <article key={id} className="card" onMouseEnter= {()=> setSelected(id)} onMouseLeave={()=> setSelected(null)}> <img src={`${ImgPath}` + poster_path} alt={title} className="image"/> {selected === id && <video src={trailer} autoPlay={true} loop></video>} <div className="body-card"> <h1>{title}</h1> <p>{`${overview.substring(0,200)}...`}</p> </div> </article> ) }) ) }Su componente movieCard no es realmente un componente movieCard. Debido a que está tomando la lista de películas como accesorios, este es un componente movieCardList. En su lugar, puede crear un componente movieCard que represente un elemento movieCard y dentro de ese componente puede mostrar el video de seguimiento por separado.
const movieCard =({movie} ) ={ const handleTrailerShow = () =>{} return <div onSomeEvent={handleTrailerShow} > .... </div> }Y en su componente principal
const movieCardList =({movieList} ) ={ return movieList.map(movie=> <MovieCard movie={movie} /> }