React.js simple app but just not rendering the HTML5

1

everyone. I’ve got data in an array and it is getting stored just fine as far as I can tell (it shows up on console when called from the array). But it is not showing up as output. I am totally lost at this point. The code is below and also you can see my work in Codepen here. If someone could point out what I’m doing wrong I’d greatly appreciate it.

Here are the preprocessors I’m using:

https://npmcdn.com/react@15.3.0/dist/react.min.js

https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js

https://code.jquery.com/jquery-2.2.4.min.js

Here is the HTML5:

<div id="content" >
</div>

here is the react.js script

var CommentBox = React.createClass({  
    render:function(){
   return(
      <div >
    <h1>Here is the data</h1>
    <AllData />
    </div>
    );
  }
});

var AllData = React.createClass({

    dataUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
    getInitialState: function() { 
        return {data: []}
    },

    componentDidMount: function(){
        $.getJSON(this.dataUrl, this.handleData)
    },
    handleData: function(data){
        this.setState({data: data});
    },
    render: function(){
        var elems = [];
        for(var i=0; i<this.state.data.length; i++){
            elems.push(<div><p>{this.state.data[i]}</p></div>);
        }
        return (<div>{elems}</div>);
    }

});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);
2 
for(var i=0; i<this.state.data.length; i++){
            elems.push(<div><p>{this.state.data[i]}</p></div>);
        }

data is an array of objects. You are adding the whole object into <p></p>. React doesn’t like it.

Try this and see for yourself (added username):

for(var i=0; i<this.state.data.length; i++){
            elems.push(<div><p>{this.state.data[i].username}</p></div>);
        }
3

Yup, that worked and that makes sense. Thanks!