Count checked checkboxes in React.js
<p>I'm using a document structure like this</p>

<pre><code>render() {
return (
    &lt;div className="MyComponent"&gt;
        &lt;ul className=""&gt;
            {parseRecommendations(this.props.recommendations)}
        &lt;/ul&gt;
    &lt;/div&gt;
);
}

function parseRecomendations(recommendations) {
    return recommendations.map((recommendation, key) =&gt; {
        return (&lt;Recommendation data={recommendation} key={key} /&gt;);
    });
}
</code></pre>

<p>Where each Recommendation is its own component containing a checkbox</p>

<pre><code>class Recommendation extends Component {
    const recommendation = this.props.data;
    const pageUrl = recommendation.url;

    return (
        &lt;li className="article-item" key={key}&gt;
            &lt;div className="article-info"&gt;
                &lt;input type="checkbox" defaultChecked="checked" aria-described-by={recommendation.pii} /&gt;
                &lt;a className="journal-title" href={pageUrl} id={recommendation.pii}&gt;{recommendation.title}&lt;/a&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    );
</code></pre>

<p>I'd like to have a title saying [Download (x) PDFs], where x is the number of selected checkboxes. How do I find the value of x in this case?</p>