Martian photo fetcher

index.js

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

const wait = response =>
  new Promise(resolve => setTimeout(() => resolve(response), 3000));

const handleErrors = response => {
  if (response.status < 200 || response.status >= 300) {
    throw new Error("Network Error");
  }

  return response;
};

class MartianPhotoFetcher extends Component {
  state = {
    photos: [],
    error: null,
    loading: true
  };

  componentDidMount() {
    fetch(
      `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${
        this.props.date
      }&api_key=gnesiqnKCJMm8UTYZYi86ZA5RAnrO4TAR9gDstVb`
    )
      .then(wait)
      .then(handleErrors)
      .then(response => response.json())
      .then(data => this.setState({ photos: data.photos, loading: false }))
      .catch(error => this.setState({ error, loading: false }));
  }

  render() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }

    if (this.state.error) {
      return <span>❌ Error: {this.state.error.message}</span>;
    }

    return (
      <>
        {this.state.photos.map(photo => (
          <img src={photo.img_src} alt="" width="100" height="100" />
        ))}
      </>
    );
  }
}

ReactDOM.render(
  <MartianPhotoFetcher date="2019-01-01" />,
  document.getElementById("root")
);