user2872518 user2872518 - 3 months ago 8
jQuery Question

ReactJS Get Call Returns Entire Array But Not Single Index

Currently, I'm able to return the entire $.get call, but when I try to return the first index it doesn't seem to work. Any insight would be appreciated. I'm essentially going to render out the contents of the array down the road, but currently can't seem to get a single index to display while taking in the entire array of objects from the get call.
You can see the entire call in the TableSet component works just fine.
You can see the code here as well: http://codepen.io/PizzaPokerGuy/pen/dXgNvQ?editors=0011

var TableSet = React.createClass({
getInitialState: function() {
return {
data: []
};
},

componentDidMount: function() {
$.get("https://fcctop100.herokuapp.com/api/fccusers/top/recent", function(data) {
var userInfo = data;
if (this.isMounted()) {
this.setState({
lastGistUrl: userInfo
});
}
}.bind(this));
},

render: function(){

return(<div className="container">
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Camper Name </th>
<th>Points in Past 30 Days</th>
<th>All Time Points</th>
</tr>
</thead>
<tr><td>1</td><td>{this.state.lastGistUrl}</td></tr>
</table>
</div>
);

}
});

var FooterBar= React.createClass({
render: function(){
return (<div id= "footerBar" className ="container text-center"><strong><h4><a href = 'https://www.YouTube.com/CodingTutorials360'>Check out my YouTube Channel: <br/>CodingTutorials360</a></h4></strong></div>);
}
});

var LeaderBar = React.createClass({
render: function(){
return (<div id='leaderBar' className='container text-center'>
<h1>Leaderboard</h1>

</div>);
}
});
var HeaderBar = React.createClass({
render: function() {
return (
<div>
<div id='headerBar' className = 'container-fluid'><img src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'/></div>
<LeaderBar />
<TableSet />
<FooterBar />
</div>
);
}
});

React.render(
<HeaderBar />,
document.getElementById('mount-point'));

Answer
var TableSet = React.createClass({

  getInitialState: function() { 
    return { 
     lastGistUrl: []
    }; 
  },

  componentDidMount: function() {
    $.get("https://fcctop100.herokuapp.com/api/fccusers/top/recent", function(data) {        
       if (this.isMounted() && Array.isArray(data)) {
           this.setState({
               lastGistUrl: data
           });
       }
   }.bind(this));
  },

  renderGist: function() {
    if (!this.state.lastGistUrl) {
      return null
    }
    var items = this.state.lastGistUrl.map(function(gist) {
     return (
       <td>{gist.username}</td>
     )
    })

    return (
      <tr>
        {items}
      </tr>
    )
  },

  render: function() {
    return(
      <div className="container">
       <table className="table table-striped table-bordered">
        <thead>
         <tr>
          <th>#</th>
          <th>Camper Name </th>
          <th>Points in Past 30 Days</th>
          <th>All Time Points</th>
        </tr>
       </thead>
       {this.renderGist()}
      </table>
     </div>
   );
  }
});
Comments