Mac Mac - 2 months ago 13
React JSX Question

Wait for object array to load and map() it. React

I am trying to loop through json_obj after it loads using async

XMLHttpRequest()
but as json_obj is null at the start map() crashes.

Here is my code:



import React, { Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';


class ImageViewer extends React.Component {
constructor() {
super();
this.state = {
loading: true,
json_obj : null,
link: "https://api.github.com/users/github/repos"
}
}
componentDidMount() {
var xhr = new XMLHttpRequest();
xhr.open("GET", this.state.link, true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
this.setState({ json_obj :JSON.parse(xhr.responseText).sort(function(a, b){var keyA = new Date(a.updated_at),keyB = new Date(b.updated_at);if(keyA > keyB) return -1;if(keyA < keyB) return 1;return 0;})});
} else {
console.error(xhr.statusText);
}
}
}.bind(this);
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(null);
}
render() {
return (
<div>
{this.state.json_obj.map((obj, index) => {
return (
<div >
<h1>{obj.name}</h1>
<h1>{obj.updated_at}</h1>
</div>
)
})}
</div>
)
}}
ReactDOM.render(
<ImageViewer />,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
: <div id="root"></div>





I tried to use conditional rendering but it throws errors as well:



import React, { Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';


class ImageViewer extends React.Component {
constructor() {
super();
this.state = {
loading: true,
json_obj : null,
link: "https://api.github.com/users/github/repos",
stuff : {name:"loading", updated_at:"loading"}
}
}
componentDidMount() {
var xhr = new XMLHttpRequest();
xhr.open("GET", this.state.link, true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
this.setState({ json_obj :JSON.parse(xhr.responseText).sort(function(a, b){var keyA = new Date(a.updated_at),keyB = new Date(b.updated_at);if(keyA > keyB) return -1;if(keyA < keyB) return 1;return 0;})});
} else {
console.error(xhr.statusText);
}
}
}.bind(this);
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(null);
}
render() {
return (
<div>
{(this.state.json_obj ? this.state.json_obj : this.state.stuff).map((obj, index) => {
return (
<div >
<h1>{obj.name}</h1>
<h1>{obj.updated_at}</h1>
</div>
)
})}
</div>
)
}}
ReactDOM.render(
<ImageViewer />,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>




Answer Source

So check if it's null and return something else:

if (!this.state.json_obj) {
  return <div>Loading...</div>;
}

return (
  <div>
    {this.state.json_obj.map((obj, index) => (
      <div key={obj.name}>
        <h1>{obj.name}</h1>
        <h1>{obj.updated_at}</h1>
      </div>
    ))}
  </div>
)

Your code was throwing because this.state.stuff is an object and you can't iterate over an object with .map. If this.state.json_obj is also an object and not an array you would need to do Object.keys(this.state.json_obj).map(....