Using react this.state in other components

Question

I have state which which contains thumbnail of my video files, i have watch button which on click navigate you to new page (component) each particular thumbnail has a name and file info, i map through the thumbnail state, how do pass the file info to the component you are navigated as your click the watch button

  {this.state.Poster.map(poster => <Col md="3 " className="" > <Card className="card-user card-transparent"> <CardImg top src= {`/files/${poster.filename}`}> </CardImg> <CardText className="py-3 px-3"> <div className="card-description"> <h5 className="display-5 text-Movie-white text-center" > {poster.metadata.name} </h5> <p className="text-center">{poster.metadata.Description} </p> </div> </CardText> <CardFooter> <div className="button-container py-3"><a href="movie/"> <Button className="btn-fill btn-movie " color="primary" > Watch </Button></a> </div> </CardFooter> </Card> </Col> )} 

Answer 1

Try accessing the history object's push method, like so:

goTo: (route, state) => {
 this.props.history.push(route, state);
}

...
// in your .map callback
<SomeComponentOrDom onClick={() => this.goTo('/SomewhereElse', { id: poster.id })}>
  Something
</SomeComponentOrDom>

...
// in SomewhereElse
constructor(props) {
  this.state = {
    posterId: props.history.location.state.id
  }
}

Of course, you should make your code more defensive and check for null in different places.

Here you can find the doc for history .