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

map is a function on JavaScript's Array; it's not defined by React. Make sure this.state.data is an Array. — Ross Allen
– Ross Allen, Commented Apr 16, 2014 at 17:29
Thats why I'm confused, state, as far as I'm aware has to be an array and state.data is defined in getInitialState: function() { return {data: []}; },. state.data is updated by loadCommentsFromServer. The script in question is returning properly formatted JSON data — t1m0thy
– t1m0thy, Commented Apr 16, 2014 at 17:37
state is always an Object, not an Array. Can you paste a sample return value from the Ajax call. My only guess is data is not an Array in the JSON response. — Ross Allen
– Ross Allen, Commented Apr 16, 2014 at 20:42

t1m0thy · Accepted Answer · 2014-04-17 20:19:20Z

19

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!

answered Apr 17, 2014 at 20:19

t1m0thy

2,8053 gold badges16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-04-16 17:33:31Z

6

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

answered Apr 16, 2014 at 17:33

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

1 Comment

Benjamin Gruenbaum Over a year ago

Actually, map works on any array like object, but you need to set the this value explicitly via .call or .apply or duck type it.

J28 · Accepted Answer · 2021-07-13 09:08:36Z

4

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

edited Jul 13, 2021 at 9:08

answered Jul 13, 2021 at 8:56

J28

1,1103 gold badges15 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related