React throwing error: Cannot read property 'map' of undefined

Question

I am learning React. I am following a chapter in book where they load the data from API under componentDidMount and update the state of the component as

getInitialState: function () {
      return {changeSets: []};
   },
   mapOpenLibraryDataToChangeSet : function (data) {
    return data.map(function (change, index) {
      return {
        "when":jQuery.timeago(change.timestamp),
        "who": change.author.key,
        "description": change.comment
      }
    });
  }, 
  componentDidMount: function () {
        $.ajax({
            url: 'http://openlibrary.org/recentchanges.json?limit=10',
            context: this,
            dataType: 'json',
            type: 'GET'
        }).done(function (data) {
//             console.log(data);
            var changeSets = this.mapOpenLibraryDataToChangeSet(data);
            console.log("changeSets:" + JSON.stringify(changeSets));
            this.setState({changeSets: changeSets});
        });
    },

When I run this, I see error on console as

"TypeError: Cannot read property 'map' of undefined
    at t.render (mikobuf.js:55:41)
    at _renderValidatedComponentWithoutOwnerOrContext (https://npmcdn.com/[email protected]/dist/react.min.js:13:17508)
    at _renderValidatedComponent (https://npmcdn.com/[email protected]/dist/react.min.js:13:17644)
    at performInitialMount (https://npmcdn.com/[email protected]/dist/react.min.js:13:13421)
    at mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:13:12467)
    at Object.mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:15:2892)
    at h.mountChildren (https://npmcdn.com/[email protected]/dist/react.min.js:14:26368)
    at h._createInitialChildren (https://npmcdn.com/[email protected]/dist/react.min.js:13:26619)
    at h.mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:13:24771)
    at Object.mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:15:2892)"

The running link is http://jsbin.com/mikobuf/edit?js,console,output

What am I doing wrong?

UPDATE

When I added the changeSets={data} while rendering the app, I see data in console

ReactDOM.render(<App headings = {headings} changeSets={data}/>, document.getElementById("container"))

But I want the data to be pulled from API. So as soon as I remove the changeSets={data} when rendering, it fails

ReactDOM.render(<App headings = {headings}/>, document.getElementById("container"))

Your ajax call is throwing an error: "error". map is only defined on arrays. — adam-beck
– adam-beck, Commented Aug 24, 2016 at 21:15
According to the information you provide, data is undefined. — Felix Kling
– Felix Kling, Commented Aug 24, 2016 at 21:17
@daydreamer see my answer. You have a couple places where props and state are used incorrectly. I have the jsbin update and it's now working on my end. — adam-beck
– adam-beck, Commented Aug 24, 2016 at 21:29

adam-beck · Accepted Answer · 2016-08-24 21:28:39Z

1

You are trying to use the props changeSets when it is actually part of Apps state.

This:

<RecentChangesTable.Rows changeSets={this.props.changeSets} />

Should Be:

<RecentChangesTable.Rows changeSets={this.state.changeSets} />

http://jsbin.com/tuqeciyere/1/edit?js,console,output

edited Aug 24, 2016 at 21:28

answered Aug 24, 2016 at 21:22

adam-beck

6,0295 gold badges22 silver badges35 bronze badges

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

3 Comments

daydreamer Over a year ago

interesting, the data is passed using state changeSets={this.state.changeSets} but child components use it as this.props as <td>{this.props.changeset.when}</td>. This seems confusing in the first place

adam-beck Over a year ago

State is internal to a component. Props are what you pass in. If you are passing in data to component you need to use props. If you are changing internal state you use state. That was a 10 second overview and I'm not the best at explaining things. You use props in a child component that receives data from its parent (even if that parent holds onto that data in state)

adam-beck Over a year ago

I think your bin changed from what you first posted. So I'm not sure what the problem is anymore.

Collectives™ on Stack Overflow

React throwing error: Cannot read property 'map' of undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related