Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 650
t1m0thy Avatar asked Apr 16 '14 17:04

t1m0thy


3 Answers

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!

like image 96
t1m0thy Avatar answered Nov 16 '22 15:11

t1m0thy


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

like image 6
Afzaal Ahmad Zeeshan Avatar answered Nov 16 '22 14:11

Afzaal Ahmad Zeeshan


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

like image 3
J28 Avatar answered Nov 16 '22 14:11

J28