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 through the API call. The initial call (seen below) works, and all JSON data is fetched and the dashboard is initially updated.

BOTTOM LINE PROBLEM: I need to call the API every 30 sec to 1 minute after the initial call to check for updates.

I have attempted "setInterval" inside the componentDidMount() as suggested by people on here answering others' questions and I get an error "await is a reserved word". I've read about forceUpdate() which seems logical for my use case given what the facebook/react page says about it. But, I've read on here as well to stay away from that...

The code below is a light version of the code I'm using. I've removed many of the components and imports for brevity's sake. Any help would be greatly appreciated.

import React, { Component } from 'react';  import Panelone from './Components/Panelone'; import Paneltwo from './Components/Paneltwo';  class App extends Component {    state = {       panelone: [],       paneltwo: []     }   async componentDidMount() {       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);       }    render () {     return (       <div className="App">         <div className="wrapper">           <Panelone panelone={this.state} />           <Paneltwo paneltwo={this.state} />         </div>       </div>     );   } }  export default App; 

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