Skip to content

.map() undefined is not a function in React.js

Right, I’m probably missing the obvious here but I am getting an ‘Uncaught TypeError: undefined is not a function’ I seems to be .map() that’s the problem but I can not see why.

var idealist = React.createClass({
loadCommentsFromServer: function() {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
            this.setState({data: data});
        }.bind(this)
    });
},
handleButtonClick: function(input) {
    // do stuff //
},
getInitialState: function() {
    return {data: []};
},
componentWillMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
    var clickFunction = this.handleButtonClick;
    var ideas = this.state.data.map(function(i){
        return <ideabox data={i} onButtonClick={clickFunction} />;
    });
    return (
        <div className="idealist">
            {ideas}
        </div>
        );
}
});

React.renderComponent(
<idealist  url="/json/quotes.php"  pollInterval={2000}/>,
document.getElementById('quoteList')
);

If I change it to var ideas = this.state.data I don’t get any errors, the JSON data is formatted correctly, what can be wrong?

Answer

It was a stupid mistake, quotes.php wasn’t returning properly formatted JSON data so it wasn’t an array .map() was being called on. The lesson learnt? Don’t take other people word for it that their code works!