title: this.setState making infinite loop outside of array.map function
body: <p>I have this array map function for rendering some stuff... 
  I have 5 variables that start from 0 and depending on a switch statement each variable value is increased by 1.</p>
  
  <pre><code>renderUser = (index)=&gt;{
      let C1Count = 0, C2Count = 0, C3Count = 0, C4Count = 0, C5Count = 0;
      let users = this.state.users.map((user,index)=&gt;{
  
     // swiching some value , that is from 0 to 4
  
     switch(this.state.users[index].result){
        case 0: { C1Count += 1;   break; }
        case 1: { C2Count += 1;  break; }
        case 2: { C3Count += 1;  break; }
        case 3: { C4Count += 1;   break; }
        case 4: { C5Count += 1;   break; }
        default: { console.log("non");  break; };
      }
      return(
        ....stuff to render 
                     )
  
  
     }).reverse();
  
  
  
    return users;
  </code></pre>
  
  <p>}</p>
  
  <p>I want to update 5 states </p>
  
  <pre><code>this.setState({
  C1Count:C1Count, // state : variable value
  C2Count:C2Count, // state : variable value
  C3Count:C3Count, // state : variable value
  C4Count:C4Count, // state : variable value
  C5Count:C5Count  // state : variable value
  });
  </code></pre>
  
  <p>If i place the setState code after <code>...}).reverse();</code> and before  <code>..return users;</code></p>
  
  <p>I get a </p>
  
  <blockquote>
    <p>Maximum update depth exceeded. This can happen when a component
    repeatedly calls setState inside componentWillUpdate or
    componentDidUpdate. React limits the number of nested updates to
    prevent infinite loops.</p>
  </blockquote>
  
  <p>error .... so my question is ... how to update the state AFTER all the loops are finished and the <code>C1Count, C2Count, C3Count, C4Count, C5Count</code> variables are updated.</p>