TripGallery.jsx

const GalleryItem = ({ url, alt, description, alt, author }) => (
  <div className="img-container">
    <img src={url} alt={alt} />
    {description} - {author}
  </div>  
);

class Gallery extends Component {
  state = {
    isLoading: false,
    currentImage: 0,
    imgs: [],
  };
  
  componentDidMount() {
    this.setState({ isLoading: true });
    // AJAX API call here
    getImgs(API_URL).then(data => {
      this.setState(() => ({ imgs: data.imgs, isLoading: false }))
    });
  }
  
  render() {
    const { imgs, isLoading } = this.state;
    return (
      {!isLoading ? imgs.map(img => (
        <GalleryItem {...img} />
       ))
       : 
        <Loading />
      }
    );
  }
}