title: count jsx within map looping
body: <pre><code>{items.filter(item =&gt; item.status === 'active').map(item =&gt;
      let total_male = item.length + 1;
      &lt;p&gt;Male ({total_male})&lt;/p&gt;
      {this.renderData(item)}
      &lt;/div&gt;
  )}
  </code></pre>
  
  <p>Is above jsx valid? It make sense to me but it has error. I have a json like this</p>
  
  <pre><code>[{"name":"james","satus":"active"},{"name":"alice","satus":"deactived"}]
  </code></pre>
  
  <p>I want to count the obj length that has status active. </p>