title: React setState in a map function
body: <p>I cannot wrap my head around the issue below. </p>
  
  <p>The issue relates to the asynchronous setState dimension. Usually I use the callback, but doesn't seem appropriate here. </p>
  
  <p>My goal is to create a state (that I will be able to sort) which is obtained by iterating on different states which are themselves created in a map.</p>
  
  <p>The function below calls my different methods, the ones we're interested in are the 2 last ones. <code>getUserPoints</code> and <code>sortArrayforUserRank</code>.</p>
  
  <pre><code>getPlayersByUser = () =&gt; {
  database
    .ref(`pools/${this.state.selectedValue}`)
    .once("value")
    .then(data =&gt; {
      for (let item in data.val()) {
        this.setState({
          users: this.state.users.concat([item])
        });
        this.setState({ [item]: data.val()[item] });
      }
    })
    .then(this.makePlayersArray)
    .then(this.getUserPoints)
    .then(this.sortArrayforUserRank);
  
  
    getUserPoints = () =&gt; {
  this.state.users.map(user =&gt; {
    // Create the dynamic name of the state, 1 for each user
    let userPoints = `${user}points`;
  
    // initializing the state for userPoint to be at 0 for future calculation
    this.setState({ [userPoints]: 0 });
  
    this.state[user].map(player =&gt; {
      database
        .ref(`players/${player}`)
        .child("points")
        .once("value")
        .then(data =&gt; {
          let points = parseInt(data.val());
          this.setState(state =&gt; ({
            [userPoints]: points + state[userPoints]
          }));
        });
    });
  });
  </code></pre>
  
  <p>The <code>getUserPoints</code> allow me to dynamically create the state.userPoints summing all the points from the players for each user. </p>
  
  <p>Then I was expecting the <code>sortArrayforUserRank</code> below to use the updated state.userPoints to create my final userArrayPoints state. </p>
  
  <pre><code>sortArrayforUserRank = () =&gt; {
  this.state.users.map(user =&gt; {
    let userPoints = `${user}points`;
    this.setState(state =&gt; ({
      userArrayPoints: state.userArrayPoints.concat([
        { [user]: state[userPoints] }
      ])
    }));
  });
  </code></pre>
  
  <p>Currently the userArrayPoints gets populated with 4 objects <code>{[user]:0}</code> instead of the final sum of points for each user. The issue there is that <code>sortArrayforUserRank</code> gets called before the previous setState are done</p>
  
  <p>I would have loved to use the setState callback in <code>getUserPoints</code> but since I'm in the player map function it will get called for each player whereas I want to handle it at the user lvl to have the final sum of points.</p>
  
  <p>I tried to use <code>componentDidUpdate</code>, and made sur to use functionnal setState as per those articles but couldn't figure it out.</p>
  
  <p><a href="https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1" rel="nofollow noreferrer">https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1</a></p>
  
  <p><a href="https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b" rel="nofollow noreferrer">https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b</a></p>
  
  <p>Your help will be glady appreciated, </p>
  
  <p>thanks </p>