daydreamer daydreamer - 11 months ago 52
React JSX Question

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

I am learning React. I am following a chapter in book where they load the data from API under

and update the state of the component as

getInitialState: function () {
return {changeSets: []};
mapOpenLibraryDataToChangeSet : function (data) {
return (change, index) {
return {
"description": change.comment
componentDidMount: function () {
url: '',
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 (
at _renderValidatedComponent (
at performInitialMount (
at mountComponent (
at Object.mountComponent (
at h.mountChildren (
at h._createInitialChildren (
at h.mountComponent (
at Object.mountComponent ("

The running link is,console,output

What am I doing wrong?


When I added the
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
. So as soon as I remove the
when rendering, it fails

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

Answer Source

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


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

Should Be:

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