I have a list of movies that I got from an API and I displayed them using the Map method, I'm trying to work on an option that when I hover on one of the cards I want to show the trailer of that specific movie in the place of the image. The problem that I face is when I hover, the video trailer is playing on all the cards, I would like to know how I can play that video on hover for a specific card.
My card component
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>
)
})
)
}
export default MovieCard
Instead of boolean flag you can store the id and frankly, this functionality should go in the individual Card and you should render that Card in the loop.
Here's how you can do in the same implementation.
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>
)
})
)
}Your movieCard component not actually a movieCard component. Because you are taking the list of movie as a props so this is a movieCardList component. Instead doing that you can create a movieCard component that renders one movieCard element and inside of that component you can show the trail video in separatly.
const movieCard =({movie} ) ={
const handleTrailerShow = () =>{}
return <div onSomeEvent={handleTrailerShow} >
....
</div>
}
And in your main component
const movieCardList =({movieList} ) ={
return movieList.map(movie=>
<MovieCard movie={movie} />
}