Alex Markov Alex Markov - 1 month ago 16
Javascript Question

React ES6 components are not re-rending

I have the following code. Please notice the two

console.log
s. I am calling the
_getChartData()
function from within another child of the
<ChartTitle>
component.

The issue is that when
_getChartData()
is called a second time, it doesn't re-re-render the child components of the code below. I am expecting it to do so because of the
setState
in there.

export default class PerformanceChart extends React.Component {

constructor(props) {
super(props);
this.state = { chart_data: [] };
this._getChartData();
}

componentDidMount() {
this._getChartData();
}

_getChartData(d = 30) {

console.log('running setState for chart data');

// AJAX GOES HERE
this.setState = ({
chart_data : [
['x', '2016-01-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01', '2016-07-01', '2016-08-01'],
['Clicks', Math.random(), 200, 100, 400, 150, 250, 125, 600],
['Orders Reported', 300, 250, 100, 400, 150, 250, 40, 300],
['totals', [1050, 5042]]
]
});

};

render() {

console.log('re-rendering!');

return (

<div>
<ChartTitle chart_data={this.state.chart_data} getChartData={this._getChartData.bind(this)} />
<Chart chart_data={this.state.chart_data} />
</div>

);
}

};


This is what I get in my console:

My console logs

Answer

I think this is your problem

this.setState = ({

setState is a function, you need to call it not assign it, i.e.:

this.setState({
    chart_data : [ 
        ['x', '2016-01-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01', '2016-07-01', '2016-08-01'],
        ['Clicks', Math.random(), 200, 100, 400, 150, 250, 125, 600],
        ['Orders Reported', 300, 250, 100, 400, 150, 250, 40, 300],
        ['totals', [1050, 5042]]
    ]
});