Asynchronous xmlhttp request in react

Question

I am trying to implement asynchronous XMLHttpRequest in react. Here is my attempt:

var xhr = new XMLHttpRequest();
var json_obj, status = false;
xhr.open("GET", "https://jsonplaceholder.typicode.com/photos/", true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      json_obj = xhr.responseText;
      status = true;
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

class Welcome extends React.Component {
  render() {
    return (
      <div>
          <img src= {status ?  json_obj[0].url : 'loading...'}></img>
      </div>
    );
  }
}
ReactDOM.render(
   <Welcome/>,
   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 have been thinking about adding listener to it but i don't know how to do it.

Overall i am having problem with an update after async XMLHttpRequest loads and returns value.

Answer 1

It is recommended to make AJAX calls in the componentDidMount lifecycle method.

componentDidMount is for side effects. Adding event listeners, AJAX, mutating the DOM, etc.

Also, you should consider using the new fetch API.

class Welcome extends React.Component {
  constructor() {
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/photos/').then(response => {
      return response.json();
    }).then(json => {
        this.setState({ data: json});
    }).catch(error);
  }

  render() {
    if (this.state.data) {
      return <img src={this.state.data[0].url} />
    }
    else {
      return <div>Loading...</div>
    }
  }
}