title: Display Data Got From JSON In Reactjs In Table
body: <p>Here I wrote A code which fetches data from API <a href="http://fcctop100.herokuapp.com/api/fccusers/top/recent" rel="nofollow noreferrer">http://fcctop100.herokuapp.com/api/fccusers/top/recent</a> and displays Data in Form Of Table Which Looks Like Below In My Case As You Can See  is Repeating For Every 
  <a href="https://i.stack.imgur.com/zsDxG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zsDxG.png" alt="enter image description here"></a></p>
  
  <p>But I want To Make It Look  Like 
  <a href="https://i.stack.imgur.com/YP7y5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YP7y5.png" alt="enter image description here"></a></p>
  
  <p>Here Is What I Did So Far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var MainBox  = React.createClass({
      render:function(){
          return(
              &lt;App/&gt;
          );
      }
  });
  var App = React.createClass({
      //setting up initial state
      getInitialState:function(){
          return{
              data:[]
          };
      },
      componentDidMount(){
          this.getDataFromServer('http://fcctop100.herokuapp.com/api/fccusers/top/recent');
      },
      //showResult Method
          showResult: function(response) {
  
              this.setState({
                  data: response
              });
      },
      //making ajax call to get data from server
      getDataFromServer:function(URL){
          $.ajax({
              type:"GET",
              dataType:"json",
              url:URL,
              success: function(response) {
                  this.showResult(response);
              }.bind(this),
              error: function(xhr, status, err) {
                  console.error(this.props.url, status, err.toString());
              }.bind(this)
          });
      },
      render:function(){
          return(
              &lt;div&gt;
                  &lt;Result result={this.state.data}/&gt;
              &lt;/div&gt;
          );
      }
  });
  var Result = React.createClass({
      render:function(){
          var result = this.props.result.map(function(result,index){
              return &lt;ResultItem key={index} user={ result } /&gt;
              });
          return(
              &lt;div&gt;
                  {result}
              &lt;/div&gt;
  
          );
      }
  });
  var ResultItem = React.createClass({
      render:function(){
          var camper = this.props.user;
          return(
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-12"&gt;
                          &lt;table className="table table-bordered"&gt;
                              &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th className="col-md-4"&gt;UserName&lt;/th&gt;
                                  &lt;th &gt;Points In Last 30 Days&lt;/th&gt;
                                  &lt;th&gt;Points All Time&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                              &lt;tr &gt;
                                  &lt;td&gt;{camper.username}&lt;/td&gt;
                                  &lt;td&gt;{camper.recent}&lt;/td&gt;
                                  &lt;td&gt;{camper.alltime}&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
          );
      }
  });
  ReactDOM.render(
      &lt;MainBox /&gt;,
      document.querySelector("#app")
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;React Tutorial&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  &lt;script src="demo.js" type="text/babel"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>