title: How to chose between two ui containers depending on data from API [React TypeScript]
body: <p>so I am working on a control panel that displays different videos / posts from an API source. I have a card div that displays video posts (Thumbnail + text) and then I have a second card div that displays more text-based posts. </p>
  
  <p>The code for both of them is as follows:</p>
  
  <pre><code>  &lt;div className=""&gt;
      &lt;Link className="styledLink" to={`adminhelpcard/${this.state.id}`}&gt;
        &lt;div className="card"&gt;
          &lt;h5 className="card-header"&gt;{this.state.title}&lt;/h5&gt;
  
          &lt;div&gt;
            &lt;img
              className="Sprite"
              onLoad={() =&gt; this.setState({ imageLoading: false })}
              onError={() =&gt; this.setState({ tooManyRequests: true })}
              src={this.state.thumbnail}
              style={
                this.state.tooManyRequests
                  ? { display: "none" }
                  : this.state.imageLoading
                  ? { display: "null" }
                  : { display: "null" }
              }
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            {this.state.tooManyRequests ? (
              &lt;h6 className="mx-auto"&gt;
                &lt;span className="badge badge-danger mt-2"&gt;&lt;/span&gt;
              &lt;/h6&gt;
            ) : null}
            &lt;div className="card-body mx-auto"&gt;
              &lt;h6 className="card-title"&gt;
                {this.state.title
                  .toLowerCase()
                  .split(" ")
                  .map((letter) =&gt; letter.charAt(0).toUpperCase() + letter.substring(1))
                  .join(" ")}
              &lt;/h6&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Link&gt;
      &lt;div className="horizontalCard"&gt;
        &lt;div className="innerCard"&gt;
          &lt;div className="leftImage"&gt;
            &lt;img
              className="Sprite"
              onLoad={() =&gt; this.setState({ imageLoading: false })}
              onError={() =&gt; this.setState({ tooManyRequests: true })}
              src={this.state.thumbnail}
              style={
                this.state.tooManyRequests
                  ? { display: "none" }
                  : this.state.imageLoading
                  ? { display: "null" }
                  : { display: "null" }
              }
            /&gt;
          &lt;/div&gt;
          &lt;div className="rightText"&gt;
            &lt;div className="card-body"&gt;
              &lt;h5 className="card-title"&gt;{this.state.title}&lt;/h5&gt;
              &lt;p className="card-text"&gt;...&lt;/p&gt;
              &lt;p className="card-text"&gt;...&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The two containers look like so:
  <a href="https://i.stack.imgur.com/rn7WH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rn7WH.png" alt="enter image description here"></a></p>
  
  <p>So my question is, how can I go about creating some sort of if-else statement that detects when a thumbnail link is provided by the api, and if it does, then it would provide a thumbnail container, whereas if it returned empty, then it would use a text-based container.</p>