Skip to content
Advertisement

.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?

Advertisement

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!

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement