title: Array of object as props not working properly
body: <p>Working on this React project, I am building a very simple view, a navigation bar with links that I don't want to be hard-coded and can be set easily using the defined components. </p>
  
  <p>On my main component, I've got something like this:</p>
  
  <pre><code>class App extends React.Component {
  
    constructor( props ){
      super( props );
    } 
  
  
    render () {
      return (
          &lt;div className="app-container-inner"&gt;
              &lt;TheHeader brandName="The Jet" navLinks={[{title: "Home", src: "#home"}, {title: "About", src: "#about"}]}/&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Needless to say <code>TheHeader</code> is being imported into the main file from <code>TheHeader.jsx</code>:</p>
  
  <pre><code>class NavLinks extends React.Component {
      constructor( props ) {
          super( props );
          const listItems = this.props.links.map( (item, idx) =&gt; 
              &lt;li&gt;&lt;a href={item.src}&gt;{item.title}&lt;/a&gt;&lt;/li&gt;
          );
      }
  
      render() {
          return( &lt;ul&gt;{this.listItems}&lt;/ul&gt; );
      }
  
  }
  
  class TheHeader extends React.Component {
      constructor(props) {
          super( props );
      }
  
      render() {
          return(
              &lt;header className="main-header"&gt;
                   &lt;div className="inner"&gt;
                       &lt;h1 className="brand-name"&gt;{this.props.brandName}&lt;/h1&gt;
                       &lt;nav className="nav-urls"&gt;
                           &lt;NavLinks links={this.props.navLinks}/&gt;
                       &lt;/nav&gt;
                   &lt;/div&gt;
              &lt;/header&gt;
          );
      }
  }
  </code></pre>
  
  <p>In the main component we can pass the array of objects which contains the name and the location of a link list item. </p>
  
  <pre><code>&lt;TheHeader 
      brandName="The Jet" 
      navLinks={[
          {title: "Home", src: "#home"}, 
          {title: "About", src: "#about"}
      ]}
  /&gt;
  </code></pre>
  
  <p>And then in <code>TheHeader</code> component the <code>NavLinks</code> component is used as this where I pass the <code>this.props.navLinks</code> prop as the prop on the <code>NavLink</code> component (yes, a lot of data being passed around, didn't find a simpler way to do it)</p>
  
  <pre><code>&lt;NavLinks links={this.props.navLinks}/&gt;
  </code></pre>
  
  <p>The result however is not what I expected, on the final page this is what renders</p>
  
  <pre><code>&lt;header class="main-header"&gt;
    &lt;div class="inner"&gt;
      &lt;h1 class="brand-name"&gt;The Jet&lt;/h1&gt;
      &lt;nav class="nav-urls"&gt;
        &lt;ul&gt;&lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Nothing inside of <code>&lt;ul&gt;</code>. The console hasn't been of any help on this either, no errors or warnings of any sort. Any idea what I might be doing wrong?</p>