Mapping data from Axios to React component

Question

I am new to React development and having trouble mapping the data from a simple API call using Axios. I have been stuck on this for a couple days now. Included below are my App.js App Component and then the API file. I have it working with the static JSON in my API file but need to connect to the actual API and pull data. Ideally, I also need to refresh the data every minute. Any direction on this is really appreciated!

App.js:

class App extends Component {

  render () {
        
        return (
          <div className="app">
            <Header />
            <div className="spacer"></div>
            <OverallStatus />
              {airData.map((e)=>{
                return (
                  <div>
                    <div className='qualityFactor'>
                      <h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {e.RelativeHumidity}%</h1>
                      <ProgressBar completed={e.RelativeHumidity}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure {e.AirPressure} hPa</h1>
                      <ProgressBar completed={e.AirPressure}
                      maxCompleted={1030} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide {e.CO2} ppm</h1>
                      <ProgressBar completed={e.CO2}
                      maxCompleted={2000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconVOCs} alt="Logo" className="iconSmall" />VOCs {e.TVOC} ppb</h1>
                      <ProgressBar completed={e.TVOC}
                      maxCompleted={1000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particulate Matter 2.5 {e.PM25} ug/m3</h1>
                      <ProgressBar completed={e.PM25}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide {e.CO} ppm</h1>
                      <ProgressBar completed={e.CO}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide {e.NO2} ppb</h1>
                      <ProgressBar completed={e.NO2}
                      maxCompleted={200} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone {e.Ozone} ppb</h1>
                      <ProgressBar completed={e.Ozone}
                      maxCompleted={100} className="statusBar" />
                    </div>
                  </div>
              );})}
          </div>
        )
    }
  }
  
  

export default App;

API JS file:

import React, { useEffect, useState} from 'react';
import axios from 'axios';

//Static data
const airData = [
    {
        "PM25":"1",
        "Temperature":"78.8",
        "RelativeHumidity":"53.2",
        "AirPressure":"1005.1",
        "TVOC":"63",
        "CO2":"942",
        "CO":"0",
        "Ozone":"7.9",
        "NO2":"11.3",
        "serialNumber":"50ff6b066571525439181887",
        "VirusIndex":3,
        "Timestamp":1644967651,
        "DateTime":"2022-02-15 18:27"
    }
]

export default airData;

Answer 1

The object you mentioned is an array response but it does not matter. It's not wrapped with an envelope like data or body etc, but it does not matter also.

A piece of code will help you to understand the mechanism. The example below handles success and fail responses.

export async function doGETRequest(url) {
    const defaultHeaders = {};
    const headers = {headers : defaultHeaders};
    var response = await axios.get(url, headers)
    .then(res => res)
    .catch(error => {
      var errorBody = error.response;
      return Promise.resolve(errorBody);
    });
    console.log("Response : " + JSON.stringify(response));
    return response;
}