CODEWITHSUNDEEP
javascripthtmlreactjs
unicorn_surprise
unicorn_surprise

Reputation: 1109

How do I get the value from a React Img component

I keep getting undefined from the console.log in 'handleClickVideo'. How can I get the value out of clicking on a video properly? I tried with a div also however div doesn't have a value property. I thought Img did though.

const Videos = ({ videos }) => {

const handleClickVideo = (event) => {
    console.log(event.target.value)
}

return (
    <>
        <h2 className="title is-5">Videos</h2>
        <div className="columns is-multiline">
        <VideoModal 
            videoOpen={videoOpen}
            setVideoClose={handleClickVideo}
        />
            {
                videos.map((video, key) => {
                    return (
                        <div className="column is-one-third">
                            <div className={styles.thumbnail}>
                                <Img src={`https://img.youtube.com/vi/${video.link}/0.jpg`} onClick={handleClickVideo} value={video.link}/>

                            </div>
                            <p className={styles.videoTitle}>Green Book Official Trailer</p>

                        </div>
                    )
                })
            }
        </div>

    </>                
)
}

Upvotes: 0

Views: 117

Answers (1)

HermitCrab
HermitCrab

Reputation: 3274

You're calling handleClickVideo in VideoModal but VideoModal doesn't have any value, so it will be undefined in your callback

    <VideoModal 
        videoOpen={videoOpen}
        setVideoClose={handleClickVideo}
    />

You can make your callback function to accept a value:

const handleClickVideo = (video) => {
    console.log(video)
}

And then update your render function:

<VideoModal 
    videoOpen={videoOpen}
    setVideoClose={() => handleClickVideo(0)}
/>

<Img
    src={`https://img.youtube.com/vi/${video.link}/0.jpg`}
    onClick={()=>handleClickVideo(video.link)}
/>

Upvotes: 1

Related Questions