How to set prop data for chart.js in React? - node.js

Question

I'm trying to fetch data from a SQL-database and show that data on a chart.js, but I'm getting this error:
Warning: Failed prop type: Invalid prop data supplied to ChartComponent.
My code looks like this:
import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';
class MinData extends Component{
constructor(){
super();
this.state = {
data: {
labels: [],
datasets: []
}
};
}
componentDidMount(){
fetch('http://localhost:4000/api/myData?limit=6')
.then (results =>{
return results.json();
}).then(data => {
let receivedData = data.map((datapost) => {
return(
{
data: {
labels: datapost.timestamp,
datasets: datapost.temp_0
}
}
)
})
this.setState({data: receivedData}, function(){
console.log(this.state.data);
});
})
}
render(){
return(
<div className="enContainer">
<Line
data={this.state.data}
options={{
title:{
display: true,
text: 'Fladan mätpunkt',
fontSize: 25
}
}}
/>
</div>
)
}
}
export default MinData;
The idea is to set state of data with the fetched data.
I'm running out of ideas, but I guess there's something wrong with the way I return data from my map function.
UPDATE:
This is what I receive in Postman when doing the same request with limit set to receive two objects:
[
{
"timestamp": "2019-01-17T18:14:20.000Z",
"battery": 5.094,
"temp_0": 23.375,
"temp_10": 19.125,
"temp_20": 19,
"temp_30": 18.812,
"temp_40": 18.562,
"temp_50": 18.625,
"temp_60": 18.688,
"temp_70": 18.688,
"temp_80": 18.188,
"temp_90": 19,
"temp_100": 18.75,
"temp_110": 18.625,
"temp_120": 18.5
},
{
"timestamp": "2019-01-17T18:17:25.000Z",
"battery": 5.104,
"temp_0": 23.375,
"temp_10": 19.125,
"temp_20": 19,
"temp_30": 18.812,
"temp_40": 18.562,
"temp_50": 18.688,
"temp_60": 18.75,
"temp_70": 18.688,
"temp_80": 18.188,
"temp_90": 19,
"temp_100": 18.75,
"temp_110": 18.625,
"temp_120": 18.5
}
]

Answer 1

You need to check if data is present in this.state.data.labels before calling Line component. Render method would have run before componentDidMount gets a chance to return and call api therefore empty data is passed and passed to Line component.
{
this.state.data.labels.length && <Line
data={this.state.data}
options={{
title: {
display: true,
text: 'Fladan mätpunkt',
fontSize: 25
}
}}
/>
}
State data should have following structure:
{
labels: ['First', 'Second'],
datasets: [
{
label: 'My First dataset',
data: [65, 59, 80, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
data: [28, 48, 40, 19, 86, 27, 90],
},
]
}