As a newbie to React, I have been struggling with mapping JSON data for a couple days now. What I have below is my App.js file. I am trying to map the data pulled from an external JSON into my array labeled airData and then into the Components further down the page. The data correctly prints to the console but the array seems empty when I try and actually use and map the data. Any direction is appreciated.

My App.js:

const airData = []

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      airData: []
    }
   }

componentDidMount(){

  var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer xxxxxxxxx");

      var urlencoded = new URLSearchParams();
      urlencoded.append("macAddress", "xxxxxxxxxx");
      urlencoded.append("mode", "minute");

      var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: urlencoded,
      redirect: 'follow'
      };

  fetch("MY_API_URL", requestOptions)
   .then(response => response.text())
   .then(data => {
     console.log(data)
     this.setState({
       airData: data
     })
   });
  }


  
  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" />Chemicals {data.TVOC} ppb</h1>
                      <ProgressBar completed={data.TVOC}
                      maxCompleted={1000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particles {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;

CodePudding user response：

Get rid of this:

const airData = []

You're storing "air data" in state correctly, and you never need or update that const that's outside the component. However, you are referring to that const when rendering the component which is confusing you.

Get rid of the above const and render from the state value:

{this.state.airData.map(data => {
  ...

CodePudding user response：

You have airData and this.state.airData - two different things

In render function you iterate over airData which is empty.

airData.map(data => {

Try to replace with

this.state.airData.map(data => {