Setup chatroom page chatting room functionality

+import axios from "axios";
+import { useState, useEffect } from "react";
 // components
 // components
 import Bottombar from "./components/Bottombar";
 import Bottombar from "./components/Bottombar";
 import Topbar from "./components/Topbar";
 import Topbar from "./components/Topbar";
 import ChatroomBox from "./components/ChatroomBox";
 import ChatroomBox from "./components/ChatroomBox";
 
 
 function App() {
 function App() {
+  const [chats, setChats] = useState(null);
+
+  useEffect(() => {
+    axios.get("/api/chat").then((response) => {
+      setChats(response.data);
+    });
+  }, []);
+
   return (
   return (
     <div>
     <div>
       <Topbar />
       <Topbar />
@@ -17,10 +27,13 @@ function App() {
       <br />
       <br />
 
 
       <div>
       <div>
-        <ChatroomBox />
-        <ChatroomBox />
-        <ChatroomBox />
-        <ChatroomBox />
+        {Array.isArray(chats) ? (
+          chats.map((chat, i) => {
+            return <ChatroomBox key={i} chat={chat} />;
+          })
+        ) : (
+          <h2>No chatting room!</h2>
+        )}
       </div>
       </div>
       <Bottombar />
       <Bottombar />
     </div>
     </div>

@@ -5,7 +5,7 @@ function UserBox({ user }) {
     <div className="userBox">
     <div className="userBox">
       <h1>{user.username}</h1>
       <h1>{user.username}</h1>
       <p>user info</p>
       <p>user info</p>
-      <div>chat!</div>
+      <div>chat!(chatting functionality)</div>
     </div>
     </div>
   );
   );
 }
 }