title: How to define placeholders/slots in grand parent and inject component from child?
body: <p>In many programming languages - eg. go and c# razor you have the ability to define placeholder / areas (layouts) which you can inject content into from other templates/views. </p>
  
  <p>I know in some frontend frameworks this is also possible eg. aurelia where you define slots. I also found this library <a href="https://github.com/dschnare/react-slot" rel="nofollow noreferrer">https://github.com/dschnare/react-slot</a> and <a href="https://github.com/monvillalon/react-page-layout" rel="nofollow noreferrer">https://github.com/monvillalon/react-page-layout</a> which doesn't seem like it is actively maintained. </p>
  
  <p>Then I found this: <a href="https://reactjs.org/docs/composition-vs-inheritance.html" rel="nofollow noreferrer">https://reactjs.org/docs/composition-vs-inheritance.html</a> which seem to do something similarly except it goes the wrong direction. Here the parent will have to know about the child, since you pass it in from the parent. </p>
  
  <p>Instead I'd like to just define a placeholder in the parent, which I can reference from the child, and somehow insert a grand child into.</p>
  
  <p>Here's an illustration of what I'm trying to do:</p>
  
  <p><a href="https://i.stack.imgur.com/RSWph.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RSWph.jpg" alt="enter image description here"></a></p>
  
  <p>Hope it makes sense. How can this be done in React?</p>