title: React. How to pass props inside a component defined on a prop?
body: <p>If we have the following structure on a React application:</p>
  
  <pre><code>class BasePage extends React.Component {
  
      render() {
          return &lt;div&gt;
              {this.props.header}
              {/*&lt;Header title={this.props.title} /&gt;*/}
          &lt;/div&gt;
      }
  }
  
  BasePage.defaultProps = {
      header: &lt;header&gt;Base Page&lt;/header&gt;
  }
  
  class Header extends React.Component {
  
      render() {
          return &lt;header&gt;
              &lt;h1&gt;{this.props.title}&lt;/h1&gt;
          &lt;/header&gt;
      }
  }
  
  class TestPage extends BasePage {
  }
  
  TestPage.defaultProps = {
      header: &lt;Header /&gt;
  }
  
  class Root extends React.Component {
  
    render() {
      return &lt;div&gt;
              &lt;TestPage
                  title="Test Page Title"
              /&gt;
      &lt;/div&gt;
    }
  }
  
  ReactDOM.render(
      &lt;Root /&gt;,
      document.getElementById('root')
  )
  </code></pre>
  
  <p>If we have a <em>common</em> component like <code>&lt;Header /&gt;</code> we can pass a title property easily like <code>&lt;Header title={this.props.title} /&gt;</code>.</p>
  
  <p>But how can we pass props inside a component if this component is defined as a prop itself?</p>
  
  <p>For example, how can we do something like:</p>
  
  <pre><code>{this.props.header title={this.props.title}}
  </code></pre>
  
  <p>So it will render the <em>Test Page Title</em> correctly?</p>
  
  <p>Important note: we could overwrite the <em>render</em> method inside the Test component. But the purpose of this question is to solve this problem without doing this.</p>