React.js undefined function

Following the Microsoft tutorial on React.js which is here.

I am trying to map a list to function so it repeats itself many times.

This is what is the main piece of code that error is:

   {[1,2,3].map(this.renderInboxItem)}

The error I get is:

bundle.js:8488 Uncaught TypeError: undefined is not a function

Here is full code:

var React = require('react');
var ReactDOM = require('react-dom');
var sample = require('./sample-data.js');

var App = React.createClass({

  renderInboxItem: function(){
    return <h1> Test </h1>
  },
    getInitialState: function() {
    return {
      "humans":{},
      "store":{}
    };
  },
  loadSampleData: function(){
    this.setState(sample);
  },
  render : function() {
    return (
      <div>
        <div id="header"></div>
        <button onClick={this.loadSampleData}> loadSampleData </button>
        <div className="container">
          <div className="column">
            <InboxPane humans={this.state.humans} />
          </div>
          <div className="column"></div>
          <div className="column"></div>
        </div>
      </div>
    )
  }
});

var InboxPane = React.createClass({
  render : function() {
    return (
      <div id="inbox-pane">
        <h1>Inbox</h1>
        <table>
          <thead>
            <tr>
              <th>Chat Received</th>
              <th>Name</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
      {[1,2,3].map(this.renderInboxItem)}


          </tbody>
        </table>
      </div>
    )
  }
});

var InboxItem = React.createClass({
  render: function(){
    return (
      <tr>
        <td>5PM</td>
        <td>Rami Loves Pizza</td>
        <td>Order Sent</td>
      </tr>
    )
  }
});

ReactDOM.render(<App/>, document.getElementById('main'));