How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?

Question

I am creating a web app in ReactJS and I am trying to call an API from within my Chart class.

I have a program that takes data from a ML model and writes it to an API in the form of an array. I'm new to using ReactJS and I just want to make a call to the API to return the array into my data variable in react to render in the graph onscreen.

The data in the API is formatted as .. [ 1, 2, 3, 4 ]

Currently I have the data hard coded into a separate file and am importing that but I want it to be called from the API directly so it updates.

import React, {Component} from "react"
import {Line} from "react-chartjs-2"
import {popuData, dayLabels} from "./FakeGraphData";

class PlanGraph extends Component{
    constructor(props){
        super(props);
        this.state = {
            chartData:{
                labels: dayLabels,
                datasets: [
                    {
                        label:'Predicted Park Crowds',
                        data: popuData,
                        borderColor: 'rgba(77, 112, 255, 1)',
                        backgroundColor: 'rgba(77, 112, 255, 1)'
                    }
                ]
            }
        }
    }

    render(){
        return(
            <div className = "chart">
                <Line
                    data={this.state.chartData}
                    options={{
                        title: {
                            display:true,
                            text:"Predicted Park Crowds",
                            fontSize:25
                        },
                        legend:{
                            display: true,
                            position: 'right'
                        },
                        scales: {
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Anticipated Crowds'
                                },
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                            xAxes: [{
                                scaleLabel: {
                                    display:true,
                                    labelString: 'Days in the future'
                                }
                            }]

                        }
                    }}
                />
            </div>
        )
    }
}
export default PlanGraph

Answer 1

Add a container Component & use Props

The component you've shown us here looks like a presentational component (has html structure, cares about how things look). What you should do is create a container component, these components care about things like logic & getting data. You can read about this design methodology here .

The container will render the component you have posted above but will pass some props kind of like this.

Example

class PlanGraphContainer extends Component {
  state = {
    dataToPass: []
  };

  async componentDidMount() {
    const response = await fetch('https://your-api-request');
    const data = await response.json(); // maybe you need this, you have to check your response
    this.setState({dataToPass: data});
  }

  render() {
    return <PlanGraph data={this.state.dataToPass} />
  }
}

Then inside your PlanGraph use this.props.data to see the data that is being passed. make sure you have some fake data or loading state whilst you wait for the request to be complete. our you can add something like this

render() {
  const { dataToPass } = this.state;
  return (dataToPass && dataToPass.length)
    ? <PlanGraph data={this.state.dataToPass} />
    : null;
}