How to map and display these Json Results like forum posts in react

Question

Here is the link to all the results

http://hyeumine.com/forumGetPosts.php

const [posts,setPosts] = useState(null)

useEffect(()=>{
    axios.get("http://hyeumine.com/forumGetPosts.php")
    .then((response)=>{
        setPosts(response.data)
        console.log(posts)
    })
},[auth,refresher,userLogged])

Answer 1

try with this code: result img

import { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";

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

  const getingData = async () => {
    try {
      const res = await axios.get("http://hyeumine.com/forumGetPosts.php");

      console.log(res.data);

      setData(res.data);
    } catch (error) {
      alert(error.message);
    }
  };
  useEffect(() => {
    getingData();
  }, []);

  return (
    <div className="App">
      {data.map((item, id) => {
        return (
          <div key={id} style={{ backgroundColor: "skyblue" }}>
            <h1>
              {item.post}
            </h1>
            <h2>
              {item.user}
            </h2>
            <h3>
              {item.date}
            </h3>
          </div>
        );
      })}
    </div>
  );
}

export default App;