Holly Johnson Holly Johnson - 17 days ago 5
React JSX Question

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'));

Answer

renderInboxItem is defined on your App class, but you're calling it on your InboxPane class where it doesn't exist. Move the method to InboxPane.

Comments