I’m new to react JS and i am trying to pass a data from a component when i click it to another component..
for example, i have an image(parent) and when i click on it, it would open a new component(child) with the data from the parent.. HOW CAN I DO THAT ON REACT JS?
this is the container
<div className="Videos">
<h2> Available Lessons </h2>
<div className="Videos__uploads">
{
vids.map(({ id, data }) => (
<Link key={id} to={{ pathname: `/play/${id}`, data: data}}>
{console.log(id)}
<VideoCard
key={id}
videoTitle={data.videoTitle}
videoDate={data.videoDate}
videoCaption={data.videoCaption}
videoUrl={data.videoUrl}
/>
{console.log(data.videoUrl)}
</Link>
))
}
</div>
this is the Parent
function VideoCard({ videoTitle, videoCaption, videoDate, videoUrl}) {
return (
<div className="videoCard">
<img className="videoCard__thumbnail"
src={Dummy}
alt="Thumbnail"
height="200px"
/>
<div className="video__info">
{/* <Avatar className="video__avatar"
alt={channel}
src={chan_img} /> */}
<div className="video__text">
<h4>{videoTitle}</h4>
<p>
{videoDate}
</p>
<p>{videoCaption}</p>
</div>
</div>
<VideoPlayer videoUrl={videoUrl}/>
</div>
)
}
and this is the child
function VideoPlayer({ key, videoTitle, videoUrl}) {
return (
<div className="videoPlayer__container">
<h1>Helloo</h1>
{console.log(videoUrl)}
<ReactPlayer
key={key}
id="videoPlayer"
url={videoUrl}
height="100%"
width='100%'
playing={true}
controls={true}
volume={1}
progressInterval={5000}
pip={true}
/>
</div>
)
}