React HighChart Example - reactjs

Question

I m using React-js-highcharts, and i have done the below code, getting data e.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
error.
Kindly help me to sort out this.
Have followed this example.
https://github.com/whawker/react-jsx-highcharts/blob/gh-pages/examples/SimpleLine/App.js
import React from 'react';
import Highcharts from 'highcharts';
import {
HighchartsChart, Chart, withHighcharts, XAxis, YAxis, Title, Subtitle, Legend, LineSeries
} from 'react-jsx-highcharts';
import { extent as d3ArrayExtent } from 'd3-array';
const plotOptions = {
series: {
pointStart: 2010
}
};
class ProductHealth extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
componentDidMount() {
let defaultOptions = {
method:'GET',
headers:{
Accept: 'application/json',
}
};
fetch('http://localhost:3000/health', defaultOptions)
.then(function(response) {
// The response is a Response instance.
// You parse the data into a useable format using `.json()`
let resData = response.json();
return resData;
}).then(response => {
console.log("Response",response);
this.processResponseData(response);
}).catch(function(error){ console.log(error) })
}
processResponseData = (response) => {
let apiValues = [];
response.forEach(element => {
let value = [];
element.values.forEach(item => {
value.push(
[item.count]
);
})
apiValues.push({
name : element.api,
value : value
})
});
this.setState({
data : apiValues
});
};
renderLineChart() {
return this.state.data.map((lineData, index) => {
return (
<LineSeries key={index} name={lineData.api} data={lineData.value} />
)
})
}
render() {
if (this.state.data.length > 0) {
return (
<div>
<HighchartsChart plotOptions={plotOptions}>
<Chart />
<Title>Visa Direct Data</Title>
<Legend layout="vertical" align="right" verticalAlign="middle" />
<XAxis>
<XAxis.Title>Time</XAxis.Title>
</XAxis>
<YAxis>
<YAxis.Title>API Calls</YAxis.Title>
{this.renderLineChart()}
</YAxis>
</HighchartsChart>
</div>
);
} else {
return <div>Loading...</div>;
}
}
}
export default withHighcharts(ProductHealth, Highcharts);

Answer 1

I strongly recommend you to try to use our official React wrapper which is also available to download through npm.
Here is the link to package: https://www.npmjs.com/package/highcharts-react-official
GitHub repository: https://github.com/highcharts/highcharts-react

Answer 2

I know I'm 7 months late to this, but looks like the clue lies in
You may have returned undefined, an array or some other invalid object
You are returning this.state.data.map which will return an array.
I would suggest you try
renderLineChart () {
const { data } = this.state
return (
<Fragment>
{data.map((lineData, index) => (
<LineSeries key={index} name={lineData.api} data={lineData.value} />
)}
</Fragment>
)
}