title: Update the header title based on the page displayed ( sibling component)
body: <p>The App.js component contains a <code>&lt;Header /&gt;</code> and <code>&lt;Page /&gt;</code> component. I want the <code>&lt;h1&gt;</code> to update depending on the Page component. I'm using react-router in the App.js file.</p>
  
  <p>How do I set the title as a prop in each Page component? </p>
  
  <p>For example, the <code>About</code> page component is:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class About extends Component {
  
   componentDidMount(){
    this.setState({ title: 'About Us' });
   }
  
   render() {
    return (
     &lt;div className="about container"&gt;
      &lt;p&gt;Page content.&lt;/p&gt;  
     &lt;/div&gt;
    );
   }
  }
  
  export default About;
  </code></pre>
  
  <p>And the <code>Header</code> component is:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Nav from '../Nav';
  import About from './components/About';
  
  class Header extends Component {
    constructor(props) {
      super(props);
      this.state = {
        title: this.props.title
      };
    }
  
   render() {
    return (
     &lt;div className="header"&gt;
       &lt;h1&gt;{this.state.title}&lt;/h1&gt;
       &lt;Nav /&gt;
     &lt;/div&gt;
    );
   }
  }
  
  export default Header;
  </code></pre>