How to call an API every minute for a Dashboard in REACT

Question

I\'ve made a dashboard in React. It has no active updating, no buttons, fields or drop-downs. It will be deployed on a wall TV for viewing. All panels (9 total) are updated thro

Answer 1

Move the data fetch logic into a seperate function and invoke that function using setInterval in componentDidMount method as shown below.

  componentDidMount() {
    this.loadData()
    setInterval(this.loadData, 30000);
  }

  async loadData() {
     try {
        const res = await fetch('https://api.apijson.com/...');
        const blocks = await res.json();
        const dataPanelone = blocks.panelone;
        const dataPaneltwo = blocks.paneltwo;

        this.setState({
           panelone: dataPanelone,
           paneltwo: dataPaneltwo,
        })
    } catch (e) {
        console.log(e);
    }
  }

Below is a working example

https://codesandbox.io/s/qvzj6005w