React: Passing Props from grandparent to grandchild

Question

I have a problem with passing props in react. This is my folder structure:

src

Component
- Button.js
Container
- PageContainer.js
Page
- Page.js

I am using Bootstrap 4 to create a Button within Button.js:

  <div>
    <a className="btn btn-primary sharp" href={this.props.url} role="button">{this.props.btnName}</a>
  </div>

There is nothing else in the class Button. So now I put a Button into the class PageContainer:

 <div>
    <Header/>
    <Button url={this.props.urlBack} btnName="Back"/>
    <Button url={this.props.urlNext} btnName="Next"/>
  </div>

As you can see I passed a title to the buttons: Back and Next. That works fine. I could now add an url and it would work fine, but that's not what I want.

I added the PageContainer to the class Page such that I can add an url at this level:

  <div>
    <PageContainer urlBack="/" urlNext="/nextPage"/>
  </div>

For some reason this is not working. Can someone explain me how I can pass props from grandparent to grandchild? In the documentation it says that this is the way how to do it. I also get no error, because the prop is not passed from Page to PageContainer. A console.log(this.props.urlBack) results in undefined.

PS: Maybe you asking why I am using the Page.js or for what reason do I have the PageContainer. First: There are far more components, I just left them out. Second: I wanna reuse the PageContainer for several pages such that I just have to change the url.

Seems to be nothing special. Can you provide whole code of the components? Btw is it non-SPA application? — Denys Kotsur, Mar 26 '18 at 14:01
https://github.com/yannistr0m/lms/tree/master/lms-app/src I cannot pass the url from Page to PageContainer to Button. In the original case it is from: BubblesortVideo to VideoContainer to Button — yannistrom, Mar 26 '18 at 14:34

Napoli · Accepted Answer · 2018-03-26T17:16:55.333

It doesn't look like you are passing props to your <VideoContainer /> component. You are merely assigning it as a routed component <Route />

Your answer can be found here: React react-router-dom pass props to component

i.e.

<Route path="/algorithmus/bubblesort/video" 
    render={(props) => <VideoContainer {...props} />}
/>

However, I don't think this will get your your this.props.url and this.props.btnName. this.props.path, yes ..but you may have to revisit some logic there.

UPDATE:

After reading your comment and checking your repo, it doesn't look like there's anything wrong with your setup. I have emulated your BubblesortVideo -> VideoContainer hierarchy at the following: https://stackblitz.com/edit/react-eaqmua

Oh thank you so much with the hint of routing. I forgot to change the routing from VideoContainer to BubblesortVideo. Lesson learned: always checking the routing. — yannistrom, Mar 27 '18 at 12:08

React: Passing Props from grandparent to grandchild

1 Answers1