Comic.js -- renderContent()

// we can destructure Fetch's state here
renderContent = ({ data, error, loading, errorMessage }) => {
    const { id } = this.props;
    
    if (error) {
      return <p>an error happened while trying to fetch comic #{id}</p>;
    }
    
    if (loading) {
      return <p>loading...</p>;
    }

    if (data) {
      const { alt, img, title } = data;

      return (
        <Fragment>
          <h3>{title}</h3>
          <figure>
            <a href={img} target="_blank" rel="noreferrer nofollow noopener"><img src={img} /></a>
            <figcaption>{alt}</figcaption>
          </figure>
        </Fragment>
      )
    }
  }