title: Reactjs pass props based on loaded component
body: <p>I need advice on how to pass a Reactjs prop from a component to my app when it's loaded. I'm able to pass the value when my props are in app.js but how do I handle the prop when loading from a separate component?  </p>
  
  <p>Here's what's working so far in app.js: </p>
  
  <pre><code>import React, { PropTypes, Component } from 'react';
  import { Grid, Nav, Navbar, NavItem, Jumbotron } from 'react-bootstrap';
  import { Link } from 'react-router';
  import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
  
  function HeaderTitle(props) {
    return &lt;h1&gt;{props.name}&lt;/h1&gt;;
  }
  
  const headerTitle = &lt;HeaderTitle name="About Page" /&gt;;
  
  class App extends React.Component {
    constructor(props) {
      super(props);
    }
    render() { ...
  
  &lt;p&gt;{headerTitle.props.name}&lt;/p&gt;
  </code></pre>