title: Is there an easy way OR a workaround to display different looking image depending on the value of a variable in React?
body: <p>I'm creating a website for my company. I'm quite inexperimented, I'm working there as an intern.
  I have to do a reporting on this website. One of the fields in 5 hearts displaying depending the value of a variable: if the variable's value is 2.5, hearts 1 &amp; 2 will be filled with red, heart 3 will be half red half gray and the others will be gray.</p>
  
  <p>I did some researches about how to manipulate images in React and css, and I found about filters, and especially the grayscale option. Sadly, I couldnt find a way to set it only for a part of the image.</p>
  
  <p>The idea would be to have a method to be called in my component's render method like this :</p>
  
  <pre><code>displayHearts = content =&gt; {
      // content is a float, value between 0 and 5
      // depending on the content, the return would be different
      return (
          &lt;div&gt;
              &lt;p&gt;{content}&lt;/p&gt;
              --&gt; display of 5 hearts, gray or red depending on content
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Here is a sample of what I would like it to look like:</p>
  
  <p><a href="https://ibb.co/VYBzXtQ" rel="nofollow noreferrer">https://ibb.co/VYBzXtQ</a></p>
  
  <p>It is possible for me to install any modules to help me do that.
  Any help would be appreciated.
  Thank you!</p>