console.clear();

const { useState, useEffect } = React;

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  /* const fetchData = () => {
    fetch(
      "https://data.epa.gov.tw/api/v1/aqx_p_136?format=json&limit=2000&api_key=9be7b239-557b-4c10-9775-78cadfc555e9"
    )
      .then((res) => res.json())
      .then((data) => {
        const filterData = data.records.filter((item) => {
          return item.SiteName === "士林" && item.ItemName === "臭氧";
        });
        setData(filterData);
      });
  }; */

  const fetchData = async () => {
    try {
      const res = await fetch(
        "https://data.epa.gov.tw/api/v1/aqx_p_136?format=json&limit=2000&api_key=9be7b239-557b-4c10-9775-78cadfc555e9"
      );
      const data = await res.json();
      const filterData = data.records.filter((item) => {
        return item.SiteName === "士林" && item.ItemName === "臭氧";
      });
      setData(filterData);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <p>{JSON.stringify(data)}</p>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));