title: How to count selected checkboxes in React functional component?
body: <p>I am needing to add bit of text in the sidebar of the following code. In each  section, I need to have a count of the number of checkboxes selected. Is it at all possible to do this in a functional component as I have? Any examples that I have found so far are only for class components. I would like to keep it as a functional component if possible.</p>
  <p>I have the code below, but here is a working version too:</p>
  <p><a href="https://codesandbox.io/s/react-playground-forked-jgmof?file=/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-playground-forked-jgmof?file=/index.js</a></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import styled from &quot;styled-components&quot;;
  import { categoryData } from &quot;./data&quot;;
  
  const Menu = (props) =&gt; {
    const [showPanel, togglePanel] = useState(false);
  
    return (
      &lt;MenuWrapper&gt;
        &lt;p&gt;Showing 20 results&lt;/p&gt;
  
        &lt;div className=&quot;button-wrapper&quot;&gt;
          &lt;p&gt;Filter By&lt;/p&gt;
  
          {categoryData.map((categorybutton, i) =&gt; (
            &lt;div key={i}&gt;
              &lt;button key={i} onClick={() =&gt; togglePanel(!showPanel)}&gt;
                {categorybutton.category}
              &lt;/button&gt;
            &lt;/div&gt;
          ))}
  
          &lt;div&gt;
            {showPanel &amp;&amp; (
              &lt;Sidebar&gt;
                {categoryData.map((categorysection, i) =&gt; (
                  &lt;details className=&quot;dropdown-header&quot;&gt;
                    &lt;summary&gt;{categorysection.category}&lt;/summary&gt;
  
                    {categorysection.data.map((categorylabel, i) =&gt; (
                      &lt;div key={i}&gt;
                        &lt;input
                          type=&quot;checkbox&quot;
                          id=&quot;vehicle1&quot;
                          name=&quot;vehicle1&quot;
                          value=&quot;Bike&quot;
                        /&gt;
                        &lt;label for=&quot;vehicle1&quot;&gt;{categorylabel.label}&lt;/label&gt;
                      &lt;/div&gt;
                    ))}
                  &lt;/details&gt;
                ))}
              &lt;/Sidebar&gt;
            )}
          &lt;/div&gt;
  
          &lt;p&gt;Toggle&lt;/p&gt;
          &lt;p&gt;Clear all filters&lt;/p&gt;
        &lt;/div&gt;
      &lt;/MenuWrapper&gt;
    );
  };
  
  const MenuWrapper = styled.div`
    width: 90vw;
    display: flex;
    justify-content: space-between;
  
    .button-wrapper {
      display: flex;
    }
  `;
  
  const Sidebar = styled.div`
    position: fixed;
    width: 200px;
    height: 100vh;
    background: white;
    top: 0;
    left: 0;
    z-index: 100000;
    text-align: left;
  
    .dropdown-header {
      background: #f7f7f7;
      margin: 20px;
    }
  `;
  
  ReactDOM.render(&lt;Menu /&gt;, document.getElementById(&quot;container&quot;));
  </code></pre>
  <pre><code>export const categoryData = [
    {
      category: &quot;user&quot;,
      data: [
        { checked: false, value: &quot;Me&quot;, label: &quot;Me&quot; },
        { checked: false, value: &quot;Kids&quot;, label: &quot;Kids&quot; },
        { checked: false, value: &quot;Guestroom&quot;, label: &quot;Guestroom&quot; }
      ]
    },
    {
      category: &quot;comfort&quot;,
      data: [
        { checked: false, value: &quot;Ultra-Soft&quot;, label: &quot;Ultra-Soft&quot; },
        { checked: false, value: &quot;Soft&quot;, label: &quot;Soft&quot; },
        { checked: false, value: &quot;Medium&quot;, label: &quot;Medium&quot; },
        { checked: false, value: &quot;Medium-Firm&quot;, label: &quot;Medium-Firm&quot; },
        { checked: false, value: &quot;Firm&quot;, label: &quot;Firm&quot; },
        { checked: false, value: &quot;Ultra-Firm&quot;, label: &quot;Ultra-Firm&quot; },
        { checked: false, value: &quot;Unsure&quot;, label: &quot;Unsure&quot; }
      ]
    },
    {
      category: &quot;type&quot;,
      data: [
        { checked: false, value: &quot;Pillow Top&quot;, label: &quot;Pillow Top&quot; },
        { checked: false, value: &quot;Open Coil&quot;, label: &quot;Open Coil&quot; },
        { checked: false, value: &quot;Pocketed Coil&quot;, label: &quot;Pocketed Coil&quot; },
        { checked: false, value: &quot;Quantum Coil&quot;, label: &quot;Quantum Coil&quot; },
        { checked: false, value: &quot;Memory Foam&quot;, label: &quot;Memory Foam&quot; },
        { checked: false, value: &quot;Latex&quot;, label: &quot;Latex&quot; },
        { checked: false, value: &quot;Unsure&quot;, label: &quot;Unsure&quot; }
      ]
    },
    {
      category: &quot;budget&quot;,
      data: [
        { checked: false, value: 500, label: &quot;Under $500&quot; },
        { checked: false, value: 1000, label: &quot;$501 - $1000&quot; },
        { checked: false, value: 1600, label: &quot;1001 - $1600&quot; },
        { checked: false, value: 2500, label: &quot;$1601 - $2500&quot; },
        { checked: false, value: 2501, label: &quot;$2500 and up&quot; },
        { checked: false, value: &quot;Unsure&quot;, label: &quot;Unsure&quot; }
      ]
    }
  ];
  
  </code></pre>