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

Question

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 1

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!

Answer 2

.map() is a method that create a new Array with results that are provided.

Here is the documentation for that:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

The thing that you can do here would be to change the .data property of the object to return an Array. Since the .map() would work on Array type objects only.

Answer 3

if this helps any one, another easy to overlook error is to initialize the variable to an empty object instead of an empty array in the state and calling map().

for example, declaring below

const [list, setList] = useState({});

instead of

const [list, setList] = useState([]);

and trying to call map() on the object

list.map((item)=>{
    //do something
})

will lead to "undefined is not a function near ... list.map(..." error during load of the component