title: Adding a 'count clicks' function to a boolean button in React
body: <p>I've built a simple message board with a star button next to each comment. I've got the button working (toggles on/off as a bool). I'm trying to add a counter that responds to the button (count goes down if star is unclicked and vice-versa). I want to pass this value to an element in the header that states "Number of favorites: n". The point is to tell the user how many comments they have favorited. The tricky part (for me anyway) is counting all of the stars' true/false status.</p>
  
  <p>I've tried building a counter, but I just can't figure out how to put the pieces together. </p>
  
  <p>This is the button:</p>
  
  <pre><code>function Favorite() {
    const [state, setState] = useState(true);
  
    function toggle() {
      state ? setState(false) : setState(true);
    }
  
    return (
      &lt;div className="Favorite" onClick={toggle} id="clicks"&gt;
        {state ? &lt;span&gt;☆&lt;/span&gt; : &lt;span&gt; &lt;/span&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Even with the counter, I don't know what I would pass into the div element in my header that lists the count next to "Number of Favorites: n". I'm sure it'd be some element wrapped in {}, just not sure what. </p>