title: How to get the number of checked checkboxes in React.js?
body: <p>I started learning React not so long ago. Decided to make some kind of &quot;life checklist&quot; as one of my beginner projects. I have been using Functional Components in the core.</p>
  <p>FYI:</p>
  <ol>
  <li>I have data.js as an array of objects where &quot;action&quot;, &quot;emoji&quot; and unique ID are stored.</li>
  <li>I import it into my App.js.</li>
  </ol>
  <pre><code>const App = () =&gt; {
    //Looping over data
    const items = data.map((item) =&gt; {
      return (
        &lt;ChecklistItem action={item.action} emoji={item.emoji} key={item.id} /&gt;
      );
    });
  
    return (
      &lt;&gt;
        &lt;GlobalStyle /&gt;
        &lt;StyledHeading&gt;Life Checklist&lt;/StyledHeading&gt;
        &lt;StyledApp&gt;{items}&lt;/StyledApp&gt;
        &lt;h2&gt;Overall number: {data.length}&lt;/h2&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Here is my <code>&lt;ChecklistItem/&gt;</code> component:</p>
  <pre><code>const ChecklistItem = ({ action, emoji }) =&gt; {
    //State
    const [isActive, setIsActive] = useState(false);
  
    //Event Handlers
    const changeHandler = () =&gt; {
      setIsActive(!isActive);
    };
  
    return (
      &lt;StyledChecklistItem isActive={isActive}&gt;
        &lt;input type=&quot;checkbox&quot; checked={isActive} onChange={changeHandler} /&gt;
        &lt;StyledEmoji role=&quot;img&quot;&gt;{emoji}&lt;/StyledEmoji&gt;
        &lt;StyledCaption&gt;{action}&lt;/StyledCaption&gt;
      &lt;/StyledChecklistItem&gt;
    );
  };
  
  export default ChecklistItem;
  </code></pre>
  <p>I would be satisfied with the functionality so far, but I need to show how many &quot;active&quot; checklist items were chosen in the parent <code>&lt;App/&gt;</code> component like &quot;You have chosen X items out of <code>{data.length}</code>. How can I achieve this?</p>
  <p>I assume that I need to lift the state up, but cannot understand how to implement this properly yet.</p>