title: How do I count the number of child objects and pass the calculated index to the child object?
body: <p>My data looks something like below </p>
  
  <pre><code>  team1 : {
           author92 : "John" , 
           author43 : "Smith" 
          },
    team2 : {
           author33 : "Dolly", 
           author23 : "Mark" 
          },
  </code></pre>
  
  <p>And my desired to display Authors by group like below but add author counter regardless of the teams</p>
  
  <p><strong>Group 1</strong><br>
    1, John<br>
    2, Smith<br>
  <strong>Group 2</strong><br>
    3, Dolly<br>
    4, Mark</p>
  
  <p>My current display is like this</p>
  
  <p><strong>Group 1</strong><br>
    1, John<br>
    2, Smith<br>
  <strong>Group 2</strong><br>
    1, Dolly<br>
    2, Mark</p>
  
  <p>I have no control about the structure of the data but I am first looping through teams and passing data to a component in a React app.</p>
  
  <pre><code>{Object.values(data).map((key) =&gt; {
     return ( 
       &lt;p&gt;Group &lt;span&gt;{key + 1}&lt;/span&gt;&lt;/p&gt;
       &lt;Team authorCounter={} /&gt;
      )
  }
  </code></pre>
  
  <p>And my Team component loops through posts and displays the authors</p>
  
  <pre><code>  const author = Object.keys(data.team1).map((key) =&gt; {
    return {
      &lt;b&gt;{key + 1}.&lt;/b&gt; }
  </code></pre>
  
  <p>I am wondering how I can pass the number of authors added on top of each other so that I can start numbering authors in the child component.</p>