title: Conditional rendering with fewer repetitions
body: <p>I currently have the following code in my component. You can see I have a lot of similar checks if the image exists or doesn't exist. I wonder if you have an idea of how to write this code block with fewer repetitions. E.g. checking for <code>image</code> only once.</p>
  <pre><code>{(!image || !element) &amp;&amp; (
    &lt;Typography align=&quot;center&quot; variant=&quot;body2&quot; color=&quot;textSecondary&quot;&gt;
      Select an element and enter the image URL to see a preview.
    &lt;/Typography&gt;
  )}
  {!image &amp;&amp; element === ELEMENT.IMAGE_SMALL &amp;&amp; (
    &lt;img
      className={classes.imageElement}
      src=&quot;https://via.placeholder.com/150&quot;
      alt=&quot;Placeholder&quot;
    /&gt;
  )}
  {!image &amp;&amp; element === ELEMENT.IMAGE_LARGE &amp;&amp; (
    &lt;img
      className={classes.imageElement}
      src=&quot;https://via.placeholder.com/350&quot;
      alt=&quot;Placeholder&quot;
    /&gt;
  )}
  {image &amp;&amp; element === ELEMENT.IMAGE_SMALL &amp;&amp; (
    &lt;img
      className={classes.imageElementSmall}
      src={image}
      alt=&quot;Half-Width Element&quot;
    /&gt;
  )}
  {image &amp;&amp; element === ELEMENT.IMAGE_LARGE &amp;&amp; (
    &lt;img
      className={classes.imageElementLarge}
      src={image}
      alt=&quot;Full-Width Element&quot;
    /&gt;
  )}
  </code></pre>