I’m trying to render a doughnut chart, but I keep getting this error:
TypeError: nextProps.data.forEach is not a function
at updatePoints (core.js:102)
at Object.classData.componentWillReceiveProps (core.js:48)
at ReactCompositeComponent.js:611
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:610)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547)
at Object.receiveComponent (ReactReconciler.js:125)
at Object.updateChildren (ReactChildReconciler.js:109)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
This is my code:
import React, { Component } from 'react';
import { Doughnut } from 'react-chartjs';
export default class FinancialAssetsGraph extends Component {
graphData() {
let data = {
datasets: [{
data: this.props.assets.map((asset) => {
return asset.value;
})
}],
labels: this.props.assets.map((asset) => {
return asset.name;
})
};
return data;
}
render() {
return (
<div>
<Doughnut data={this.graphData()} />
</div>
);
}
}
It seems the package expects an array to be passed in the data prop, but the Chart.js Docs says otherwise.
How should I handle this? What prop structure and type should I use?