CODEWITHSUNDEEP
htmlreactjs
John
John

Reputation: 1

Dirt simple reactjs program - why is the data not displaying?

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 is the HTML5:

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

Here is the reactjs:

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

var AllData = React.createClass({
  render: function(){
     var theList = [];
      $.getJSON( 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
        function(data) {
         theList = data;
         var steencamp
          for(var i=0; i<10; i++){       
            steencamp = theList[i]
            console.log(steencamp)
            return (
              <div><p>{steencamp}</p></div>
            );
        }
    })
  }            
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Upvotes: 0

Views: 43

Answers (2)

John
John

Reputation: 1

Here is the working code:

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].username}</p></div>); 
        }
        return (<div>{elems}</div>);
    }

});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')

);

Upvotes: 0

John Ruddell
John Ruddell

Reputation: 25842

you should not be doing an ajax request in your render function. render should be used to display data only.

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>;
    }
});

Upvotes: 1

Related Questions