Exactly what does handleData do in a reactjs script?

Question

I have made it this far with a FreeCodeCamp project, with a bit of help from some folks who have traveled further down the react.js road. Before I go on, though, can someone please explain to me exactly what "this.handleData" accomplishes in the following code? (It is someone else's code I was allowed to use, and it helps me get the data I am grabbing from the api to render on the page, but what exactly is handleData doing?)

var LeaderList = 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++){
          var subelems = [];
          subelems.push(<div><p>{this.state.data[i].img}</p></div>);
          subelems.push(<div><p>{this.state.data[i].username}</p></div>);
          subelems.push(<div><p>{this.state.data[i].recent}</p></div>);
          subelems.push(<div><p>{this.state.data[i].alltime}</p></div>);
          elems.push(subelems);
        }
        return (<div>{elems}</div>);
    }

});

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

score 0 · Answer 1 · answered Sep 02 '16 at 16:36

In that code handleData is a custom method that calls setState. setState is part of the React Component API. It causes the Component to re-render, using the data passed to it to set the this.state property available to the component. this.state is accessible in the render method, so the data passed to handleData is being made available to the render method.

As you can see in the render method, this.state is accessed to control what DOM is created.

score 0 · Answer 2 · answered Sep 02 '16 at 16:36

Firstly, componentDidMount() makes a call to your component's dataUrl, and gets back some data. handleData takes that data and uses it to set the component's state, or internal data store.

That's then used below in the component's render() function, which gets called whenever the state changes.

score 0 · Answer 3 · answered Sep 02 '16 at 16:59

I think the place to start here is the componentDidMount function. If you take a look at the React Component Lifecycle, you'll see that this function is called after the initial render when the component is placed into the DOM: https://facebook.github.io/react/docs/component-specs.html

The docs advise that:

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

It looks like we're making an Ajax call here (Via what I assume is JQuery) to fetch some data from the server. We pass in handleData as a callback which will be called with the results once the Ajax request is complete, which does this:

this.setState({data: data});

To understand what state is in React there are a couple of good links here:

https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

State is reserved only for interactivity, that is, data that changes over time

This is applicable to us as the result of the Ajax request will change this data - only once from nothing to something, but it still changes. When you call setState React triggers a "state transition" which will eventually call render again, where it will populate the elems variable with your data and display it on the screen.

Exactly what does handleData do in a reactjs script?

3 Answers3