Display Data Got From JSON In Reactjs In Table
<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>