title: Looping dynamic server response in React render
body: <p>I'm developing some SPAs in React and I came across with this issue several times; I eventually solved it in UGLY ways like the one posted in the code below.</p>
  
  <p>I feel like I'm missing something obvious but I really can't figure out a more elegant (or even right) way to accomplish the same result, can you help me?</p>
  
  <pre><code>class Leaderboard extends React.Component {
    constructor(props) {
      super(props);
      this.state={
        lb:{},
        leaderboard:""
      };
      this.leaderboardGet = this.leaderboardGet.bind(this);
      this.leaderboardSet = this.leaderboardSet.bind(this);
      this.lblooper = this.lblooper.bind(this);
      this.lbconstruct = this.lbconstruct.bind(this);
    }
  
  
    leaderboardGet(callback){ //server call which returns data
      axiosCall.get('leaderboard.php',{params:{user:this.props.user}})
      .then((response)=&gt;{
        var arr=response.data;
        callback(arr);
      })
      .catch((error)=&gt;{
        console.log(error);
      })
    }
    leaderboardSet(a){ //puts in lb object the results of the server call and calls lb looper
      this.setState({lb: a});
      this.lblooper();
    }
    componentWillMount(){
      this.leaderboardGet(this.leaderboardSet);
    }
  
    lblooper(){ //the ugliness itself: loops the data in lb object, and pushes it into an "html string" in lblconstruct function 
      Object.entries(this.state.lb).forEach(
        ([key, value]) =&gt; this.lbconstruct(`&lt;div class="leaderblock ${value.active}"&gt;&lt;div class="leaderscore"&gt;${value.pos}) &lt;/div&gt;&lt;div class="leadername"&gt;${value.usrname}&lt;/div&gt;&lt;div class="leaderscore dx"&gt;${value.pts} &lt;i class='fa fa-trophy'&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;`)
      );
    }
    lbconstruct(s){
      this.setState({leaderboard:this.state.leaderboard+=s});
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="leaderboard"&gt;
            &lt;div dangerouslySetInnerHTML={{__html:this.state.leaderboard}}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Basically, if I have server data which has to be put inside html format for N loops, i couldn't find another way, so I'm wondering where I'm wrong.</p>