import React, { useEffect, useState } from "react";
import axios from "axios"
import '../App.css';
import ProgressBarForCO from "../progress bar/ProgressBarForCO"
import ProgressBarForNO from "../progr`your text`ess bar/ProgressBarForNO";
import ProgressBarForNO2 from "../progress bar/ProgressBarForNO2";
import ProgressBarForSO2 from "../progress bar/ProgressBarForSO2";

export default function Home() {

    const [airData, setAirData] = useState([]);
    
    useEffect(
        () => {
            loadAirData();
        }, []
    );
    
    const loadAirData = async () => {
        const result = await axios.get("http://localhost:8080/AirData");
        setAirData(result.data);
    
    }
    
    return (
    
        <div >
            <div className='container'>
                <div className='py-4'>
                    {
                        airData.map((data) => (
                            <h1 style={{
                                color: 'white',
                                fontSize: '30px'
                            }}>
                                Data Received Time : {data.timeStamp}
                            </h1>
                        ))}
    
                </div>
                <div className="containerBox" style={{ marginTop: '25px' }}>
    
                    {
                        airData.map((data) => (
                            <>
                                <div >
                                    <div >
                                        <p style={{ color: 'black' }}>Carbon Monoxide </p>
                                        <div style={{
                                            width: '100px',
                                            display: 'block',
                                            marginLeft: 'auto',
                                            marginRight: 'auto'
                                        }}>
                                            <ProgressBarForCO score={data.co} /></div>
                                    </div>
                                </div>
                            </>
                        ))}
                    {
                        airData.map((data) => (
                            <>
                                <div >
                                    <div >
                                        <p style={{ color: 'black' }}>Nitric oxide </p>
                                        <div style={{
                                            width: '100px',
                                            display: 'block',
                                            marginLeft: 'auto',
                                            marginRight: 'auto'
                                        }}>
                                            <ProgressBarForNO score={data.no} /></div>
                                    </div>
                                </div>
                            </>
                        ))}
                </div>
                <br />
                <br />
                <div className="containerBox">
                    {
                        airData.map((data) => (
                            <>
                                <div >
                                    <div >
                                        <p style={{ color: 'black' }}>Nitrogen dioxide</p>
                                        <div style={{
                                            width: '100px',
                                            display: 'block',
                                            marginLeft: 'auto',
                                            marginRight: 'auto'
                                        }}>
                                            <ProgressBarForNO2 score={data.no2} /></div>
                                    </div>
                                </div>
                            </>
                        ))}
                    {
                        airData.map((data) => (
                            <>
                                <div >
                                    <div >
                                        <p style={{ color: 'black' }}>Sulphur dioxide </p>
                                        <div style={{
                                            width: '100px',
                                            display: 'block',
                                            marginLeft: 'auto',
                                            marginRight: 'auto'
                                        }}>
                                            <ProgressBarForSO2 score={data.so2} /></div>
                                    </div>
                                </div>
                            </>
                        ))}
    
                </div>
                <ul className="final">
                    <li style={{ color: '#66FF00' }}>Excellent</li>
                    <li style={{ color: '#90EE90' }}>Good</li>
                    <li style={{ color: 'yellow' }}>Lightly polluted</li>
                    <li style={{ color: '#FFBF00' }}>Heavily polluted</li>
                    <li style={{ color: 'red' }}>Severely polluted</li>
                </ul>
            </div>
        </div>
    )

}

I tried setting the "setAirData(result.data[0]". But it is displaying an error.

CodePudding user response：

You are mapping your airData in the component render, therefore, it has to be an array. When you set it to be results.data[0], airData is converted to an object and it cannot be mapped.

You can do setAirData([results.data[0]]) instead and it will set the value to be an array with only the first element, and it will render just fine.

CodePudding user response：

the compiler is complaining that airData.map is not a function. that means that airData is not an array :

const result = await axios.get("http://localhost:8080/AirData");
console.log(result.data) // <-- add this line
setAirData(result.data);

Most probably here that your endpoint is returning un object as result.data not an array

CodePudding user response：

the airdata is not an array.

setAirData([results.data[0]])