CODEWITHSUNDEEP
reactjsreact-router
Rakshith Jk
Rakshith Jk

Reputation: 151

Passing props to component in ReactJS

I was developing an React application, but had a confusion regarding passing of prop to the component.

On checking the internet, i found out that passing props is by adding it in route-

<Route exact path='/' render={(props) => <HomePage {...props} active={1} />}

But an issue i encountered was,since all my routes were inside a switch statement at app.js, how to i pass the prop from a different page.

eg: This is my folder structure -

-App.js

-Movie Folder

---movie_page.js

---description_page.js

suppose that i had a link statement in the movie_page, to go to the description_page and i wanted to pass some calculated quantity to description_page as a prop, how do i achieve this? All my routes are in App.js, and the value i want to pass as prop is calculated only in movie_page.js

Upvotes: 1

Views: 83

Answers (1)

Alex
Alex

Reputation: 3991

You can pass parameters through the Link.for example, you should have a route like this

<Route 
path="/description/:value1" 
render={props => <Description {...props} />}
/>

and in movie page

<Link
      to={{
        pathname: "/description/samplevalue",
        param1: 1,
        param2: 2,
        param3: { id: 1, name: "jack" }
      }}
    >
      Description
</Link>

Now you can access to all parameters:

  <div>
    Description page
    <h4> {this.props.match.params.value1}</h4>
    <h4> {this.props.location.param1}</h4>
    <h4> {this.props.location.param2}</h4>
    <code> {JSON.stringify(this.props.location.param3)}</code>
  </div>

Working Codesandbox sample , I hope it would be useful

Upvotes: 1

Related Questions