How can i target a specific item from a list of array on Hover in React-CodePudding

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)}
                onm ouseLeave={()=> 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

CodePudding user response：

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)}
                onm ouseLeave={()=> 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>
            )
       })
          
    )
}

CodePudding user response：

onMouseEnter={handleMouseEnter}

const handleMouseEnter=(event)=>{
event.target.autoPlay=true
}

this way you should get hold of the particular video/image

CodePudding user response：

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} />

 }