title: Trying to conditional render react-fontawesome icon based on current state
body: <p>I have a browser based game I am creating with React. The user will have lives that will decrease when a given event occurs. Lives are displayed to the player via 3 font-awesome heart icons. I am using react-fontawesome.</p>
  
  <p>Getting the icons to display is not an issue. I am looking for a cleaner way to display the 3 heart icons based off state (trying not to use nested if statements or switch statement if possible).</p>
  
  <pre><code>// initial state
  
  state = { lives: 3 }
  
  
  
  // import of FA icon with react-fontawesome
  
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  
  import { faHeart } from '@fortawesome/free-solid-svg-icons'
  
  
  
  // assigning icon to variable
  
  let hearts = &lt;FontAwesomeIcon icon={faHeart} className="mx-1" /&gt;;
  
  
  
  // displaying icon
  
  &lt;div className="d-flex panel-content-md"&gt;{ hearts }&lt;/div&gt;
  </code></pre>
  
  <p>When the state of 'lives' decreases, a heart icon should be removed indicating to the player they have loss a life. I have found to display multiple icons in the 'hearts' variable, you have to wrap the  tags in a parent div tag:</p>
  
  <pre><code>let hearts = (
      &lt;div&gt;
          &lt;FontAwesomeIcon icon={faHeart} className="mx-1" /&gt;
          &lt;FontAwesomeIcon icon={faHeart} className="mx-1" /&gt;
          &lt;FontAwesomeIcon icon={faHeart} className="mx-1" /&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>I have not found a clean conditional rendering solution that just looks at the number that is assigned to 'lives' and updates the amount of hearts that are displayed. I have a feeling I am overlooking the obvious here.</p>