React render Chart.js based on api response

Question

I am using reacts and chart.js, and the chart-js/react wrapper. I am dynamically pulling the data from an API and then basing the chart on the data returned. The issue is that it is only one name from the API call that is being displayed in the graph. There should be three names.

I think the problem is that the rendering of the Graph component is being rendered before all the data has been returned by the API, so the graph only contains the first name. At least this is what i think. I have tried working with the componentWillMount function but cannot get it working.

can anyone spot anything wrong with my code below?

var App = React.createClass({

    getInitialState: function(){
        return {
            names: []
        }
    },

    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ names: data })
        }.bind(this));
    },

    render: function() {
        return(
            <div>
                <Graph names={this.state.names}/>               
            </div>
        )
    }
});

var Graph = React.createClass({

    render: function() {
        for(var i = 0; i < this.props.names.length; i++) {
            names.push(this.props.names[i].name)
        }
        var chartData =  {
            labels: names,
            datasets: [{
                   data: goals
                },
                {
                    data: predictions
                }]
        };
        return <LineChart data={chartData} width="600" height="250"/>
    }
});

score 5 · Accepted Answer · edited May 23 '17 at 12:24

5

You have to control your state like below:

var App = React.createClass({
    getInitialState: function(){
        return {
            names: [],
            isLoaded: false
        }
    },
    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ 
                names: data,
                isLoaded: true
            })
        }.bind(this));
    },
    render: function() {
        return(
            <div>
                {this.state.isLoaded ? <Graph names={this.state.names}/> : <div>Still Loading... </div> }
            </div>
        )
    }
});

So once you get all your data you can render your chart otherwise show the loading screen. Take a look at this Link probably it will be helpfull for you. Hope it makes sense for you.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 21 '16 at 14:11

The Reason

7,705
4
24
42

The problem now is that the graph is getting rendered twice. – Nov 21 '16 at 14:24
@phantom that's okay. - once when you initiate state and once when you are using `this.setState` – The Reason Nov 21 '16 at 14:35
yeah, but i don't want it to create a new graph on each render, but instead just create it once – Nov 21 '16 at 14:41
@phantom so probably you have to look at `shouldComponentUpdate` method. if it is being called at initial state that you can handle it – The Reason Nov 21 '16 at 14:45
i have created a question here in case someone else comes across the same issue http://stackoverflow.com/questions/40722861/react-render-function-preventing-creating-new-canvas-element-on-each-invocation – Nov 21 '16 at 14:47

React render Chart.js based on api response

1 Answers1

Linked