Parsing data then mapping from JSON using Fetch API

As a beginner to React, I have been struggling with this issue for a couple days now and any direction is appreciated. I am able to console log my JSON result from my API but I cannot get the data to display in my component. I want to map the data to the component. I have individual sections for each data entry from my JSON.

My App.js is:

fetch("MY_URL", requestOptions)
.then(response => response.json())
.then(data => {
  console.log(data)
  airData.setState({
    content: data 
  })
});



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

export default App;