Passing props a on button click - node.js

Question

<Slider {...settings}>
{this.state.featuredMovies.map(movie =>
<div className="" key={movie._id}>
<Card inverse style={{padding: "10px", width: "90%"}}>
<CardImg src={`/files/${movie.thumbnail}`} alt="Card image cap" />
<CardImgOverlay className="movie-list-overlay">
<CardTitle>{movie.MovieName}</CardTitle>
<CardText>{movie.Description}</CardText>
<CardText>
<small>
<a href="watch">
<Button className="btn-fill btn-movie " color="primary" onClick={movie}>
Watch
</Button></a></small>
</CardText>
</CardImgOverlay>
</Card>
</div>
)}
</Slider>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
i want to pass the movie props on button click to the watch component so the watch component
class WatchMovies extends React.Component {
ComponentDidMount(){
const { player } = this.refs.player.getState();
}
handleDelete = e => {
console.log(this.refs.player.play())
}
handleD = e => {
const {player} = this.refs.player.getState()
console.log(player.currentTime)
console.log(this)
}
render() {
return (
<>
<div className="container-fluid bg-black">
<div className="col-md-12 mx-auto pt-5">
<Row className="" >
<div className="col-md-12 mx-auto py-5">
<Player
ref="player"
width="80%"
playsInline
poster="/assets/bg5.jpg"
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
position="center"
LoadingSpinner
onEnded={() => console.log("ended")}
/>
<Button onClick={this.handleDelete}>D </Button>
<Button onClick={this.handleD}>D </Button>
</div>
</Row>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
i want to pass the movie props on button click to the watch component so the watch component. Watch component is where you will be redirect to watch the movie you selected from the movielist component above

Answer 1

Your onClick needs to be a function
<Button onClick={() => this.doSomething(movie)} />
Then you can access the movie value in that function
const doSomething = (movie) => {
//Do some stuff with the movie
}