React js map () undefined is not a function

Question

I'm new to React and I'm a little crazy trying to figure out what I'm doing wrong. I am trying to iterate through a json array that I get from an ajax call. When I mock the data, it works fine, but when I make an ajax call to get the exact data, it gives me undefined is not a function (evaluating 'this.state.list.map()')

array:

[ { "name": "drop1" }, { "name": "drop2" }, { "name": "drop3" } ]

function:

 var List = React.createClass({ getInitialState: function() { return {data: {}}; }, componentDidMount: function() { $.ajax({ url: ACTUAL_URL, dataType: 'json', success: function(data){ this.setState({data: data}); }.bind(this), error: function(xhr, status, err){ console.error(url, status, err.toString()); }.bind(this) }); }, render: function() { return ( <ul className="droplist"> {this.state.data.map(function(l){ return (<li>{l.name}</li>) })} </ul> ); } }); 

Any help is greatly appreciated.

Answer 1

Change getInitialState() . Your data is currently an object literal, and object literals do not support map() . Change it to an array.

Answer 2

In my case, I tried to use array.map , but my data was actually an object, not an array, so using Object.keys(data) right way to iterate over objects:

 Object.keys(data).forEach(item => {...}); // OR Object.keys(data).map(item => {...}); 

Read more here