title: React - populating <li> error
body: <p>Hello I am implement some basic navigation in React, I have the following code:</p>
  
  <p><strong>EDITED .js</strong></p>
  
  <pre><code> var Navigation = React.createClass({
    getDefaultProps: function() {
      return {
        navigationItems: [
          { 'id': 1, 'name': 'Home', 'url': '/home' },
          { 'id': 2, 'name': 'About', 'url': '/about' },
          { 'id': 3, 'name': 'Contact', 'url': '/contact' }
        ]
      };
    },
    render: function() {
      return (
        &lt;nav&gt;
          &lt;ul&gt;
            {this.props.navigationItems.map(function() {
              return (
                &lt;li&gt;&lt;a href={this.props.url}&gt;{this.props.name}&lt;/a&gt;&lt;/li&gt;
              );
            })}
          &lt;/ul&gt;
        &lt;/nav&gt;
      );
    }
  });
  
  module.exports = Navigation
  </code></pre>
  
  <p>It's throwing me the following error: <code>Uncaught TypeError: Cannot read property 'props' of undefined</code>. Any ideas why?</p>