score:0

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

function TestMe(props) {
  const [loading, setLoading] = useState(true);
  const [info, setInfo] = useState({});

  useEffect(() => {
    (async function () {
      const response = await axios.get("/flat/test.json");
      const jsonData = await response.data.articles;

      setInfo(jsonData);
      setLoading(false);

      console.log("data", jsonData);
    })();
  }, []);

  return (
    <>
      {loading ? (
        <div className="load"></div>
      ) : (
        <>
          <div className="article">
            {info.map((item, index) => (
              <div key={index} className="article-text">
                <h1>{item.title}</h1>
                <h2>{item.author}</h2>
                <p>{item.body}</p>
              </div>
            ))}
          </div>
        </>
      )}
    </>
  );
}

export default TestMe;

Related Query

More Query from same tag