How use some props on other components Reactjs

Question

I mapped through the list of Movies(Posters), i have button (watch) on each poster, once you click the button watch it will take you to another component (watch). How do i pass the individual poster props from Poster component to the watch component on button click.

{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">
                  <h6 className="display-5  text-center">{poster.metadata.name}</h6>
                  <p className="text-center">{poster.metadata.Description}</p>
                  </div>
                  </CardText>
                <CardFooter>
                  <div className="button-container  py-3"><a href="watch">
                    <Button className="btn-fill btn-movie " color="primary" >
                      Watch
                    </Button></a>
                  </div>
                </CardFooter>
              </Card>
            </Col>
            )}

Possible duplicate of [ReactJS Two components communicating](https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating) — David Lemon, Jan 16 '19 at 12:34

score 1 · Answer 1 · answered Jan 16 '19 at 12:45

Since you mentioned react-router | react-router-dom in v4 , you can do it in either of these ways:

A

Replace with

<Link
  className="btn btn-primary" // some bootstrap class 
  to={{
    pathname: "/watch",
    state: { posterId: poster.id } // I am assuming  post has id
  }}
/>

in WatchComponent

class WatchComponent extends React.Component {
 componentDidMount() {
   const { posterId } = this.props.location.state;
   //make ajax request to the server and get poster details 
   //promise resolve, set response into state 
   // this.setState({ poster: res.json()})

 }
 render() {
   const { poster } = this.state;
   return (
     // render poster details here.
   )


 }
}

Or You can simply do this

<Link
  className="btn btn-primary" // some bootstrap class 
  to={`/watch/${posterId}`} // provided that Route of WatchComponent is defined as (URL parameter) <Route path="watch/:posterId" component={WatchComponent} />
/>

then in WatchComponent you do

class WatchComponent extends React.Component {
 componentDidMount() {
   const { posterId } = this.props.macth.params;
   //make ajax request to the server and get poster details 
   //promise resolve, set response into state 
   // this.setState({ poster: res.json()})

 }
 render() {
   const { poster } = this.state;
   return (
     // render poster details here.
   )


 }
}

Another way, without react-router-domm could be making Card as component and attach a callback, say it `getId` to it, then fire the later whenever a button is press within and pass back `postId` to parent component which will re-render and pass down postId to `WatchComponent`. This requires component life cycle such as componentDidUpdate and more tweaks. — tbuglc, Jan 16 '19 at 12:55

How use some props on other components Reactjs

1 Answers1