docker-compose.yml

@@ -3,8 +3,3 @@ services:
     image: toogether/webapp
     ports:
       - "80:3000"
-    build: 
-      context: ./
-      dockerfile: Dockerfile
-    environment:
-      - NEXT_PUBLIC_API_URL=http://api:3000

src/app/components/FetchApi.tsx

@@ -1,18 +1,16 @@
 "use client";
 import { axiosInstance } from "@/app/lib/axios";
-import { useRef } from "react";
+import { useState } from "react";
 
 export const FetchApi = () => {
-	const listRef = useRef<HTMLUListElement>(null);
+	const [date, setDate] = useState<string | null>(null);
 
 	const handleFetch = async () => {
 		const response = await axiosInstance.get<{
 			message: string;
 		}>("/ping");
 
-		const li = document.createElement("li");
-		li.textContent = response.data.message;
-		listRef.current?.appendChild(li);
+		setDate(response.data.message);
 	};
 
 	return (
@@ -23,7 +21,15 @@ export const FetchApi = () => {
 			>
 				Fetch API
 			</button>
-			<ul ref={listRef}></ul>
+			<div className="mt-4">
+				{date ? (
+					<p className="text-white">Server time: {date}</p>
+				) : (
+					<p className="text-white">
+						Click the button to fetch the API
+					</p>
+				)}
+			</div>
 		</div>
 	);
 };