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.

Answer 1

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

ie

<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