React design patterns example

Gallery.jsx

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 => (
        <div className="img-container">
          <img src={img.url} alt={img.alt} />
          {img.description} - {img.author}
        </div>
       ))
       : 
        <Loading />
      }
    );
  }
}