title: Setting up half-icons with a rating system
body: <p>I built a component that is basically a rating system that allows you to add more icons depending on the dropdown. </p>
  
  <p>I was wondering if there was a way to make half stars, I've looked through older code on the internet, but there isn't anything that has been updated. Any help with be appreciated</p>
  
  <pre><code>import React, { useState } from 'react'
  import {FaStar} from "react-icons/all";
  import './Rater.css'
  
  
  const Rater = () =&gt; {
      const [rating, setRating] = useState(null)
      const [hover, setHover] = useState(null)
      const [value] = useState(100)
      const [iconValue, setIconValue] = useState(5)
  
  
      return (
          &lt;div&gt;
              &lt;select onChange={(e) =&gt;
              {setIconValue(Number(e.target.value))}}&gt;
                  { Array.from(new Array(value),(value, index) =&gt;
                      index + 1).map(value =&gt; &lt;option
                      key={value} value={value}&gt;{value}&lt;/option&gt;) }
              &lt;/select&gt;
              &lt;h1&gt; Select Amount of Icons &lt;/h1&gt;
  
  
              {[... Array(iconValue)].map((icon, i) =&gt; {
                  const value = i + 1
  
                  return (
                      &lt;label&gt;
                          &lt;input type='radio'
                                 name='rating'
                                 value={value}
                                 onClick={() =&gt; setRating(value)}
                          /&gt;
                          &lt;FaStar classname='star'
                                  color={value &lt;= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                                  size={100}
                                  onMouseEnter={() =&gt; setHover(value)}
                                  onMouseLeave={() =&gt; setHover(null)}
                          /&gt;
                      &lt;/label&gt;
                  )
              })}
          &lt;/div&gt;
      )
  }
  
  export default Rater
  </code></pre>