Q:

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>

A:

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

