I am attempting to plot an array of integers given to react front end of the site from the asp.net backend. Specifically it comes from a controller. I can create a heatmap object using this array of integers. I would like to render this object in the JSX if possible. I am unable to map it to html as it is only one object.
Currently i am creating the plotly heatmap in the renderHeatMap function. The site can render the plot but throws the following error: " Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. "
Is what I am attempting possible in the App.js portion of the site?
import React, { Component } from 'react';
import Plotly from './plotly.js';
export default class App extends Component {
static displayName = App.name;
constructor(props) {
super(props);
this.state = { binaryData: [], loading: true };
}
componentDidMount() {
this.populateWeatherData();
}
static renderHeatMap(binaryData)
{
var heatMap = [
{
z: [binaryData.slice(0, 7658134), binaryData.slice(7658135,15316269)],
type: 'heatmap'
}
];
let heatMapObj = Plotly.newPlot('heatMapSection', heatMap);
return <div> {heatMapObj}</div>
}
render() {
let contents = this.state.loading
? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
: App.renderHeatMap(this.state.binaryData);
return (
<div>
<h1 id="tabelLabel" >Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
{contents}
</div>
);
}
async populateWeatherData() {
const response = await fetch('weatherforecast');
const data = await response.json();
this.setState({ binaryData: data, loading: false });
}
}