Передача реквизита по нажатию кнопки

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>

Я хочу передать реквизиты фильма при нажатии кнопки компоненту часов, чтобы компонент часов

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>

Я хочу передать реквизиты фильма по нажатию кнопки компоненту просмотра, чтобы компоненту просмотра.Компонент просмотра - это место, куда вы будете перенаправлены для просмотра фильма, выбранного вами из компонента movielist выше

Answer 1

Ваш onClick должен быть функцией

<Button onClick={() => this.doSomething(movie)} />

Тогда вы сможете получить доступ к значению фильма в этой функции

const doSomething = (movie) => {
  //Do some stuff with the movie
}