data now retrieved through node

src/components/MessageInfo.js

@@ -1,21 +1,32 @@
+import { useEffect, useState } from 'react';
 import Messages from './Messages';
 
 function MessageInfo() {
-    let greetings = (require('../messages.json')).messages;
-    console.log(greetings);
-    return (
-      <div id="messageForm">
-        {greetings.map((greetings, index) => (
-            <Messages
-              key={index}
-              group={index+1}
-              index={greetings.index}
-              greeting={greetings.message}
-              easterEgg={greetings.easteregg}
-            />
-        ))}
-      </div>
-    );
+  const [state, setState] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch("/sui/api/messages");
+    const data = await response.json();
+    setState(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+  
+  return (
+    <div id="messageForm">
+      {state.map((greetings, index) => (
+          <Messages
+            key={index}
+            group={index+1}
+            index={greetings.index}
+            greeting={greetings.message}
+            easterEgg={greetings.easteregg}
+          />
+      ))}
+    </div>
+  );
 }
 
 export default MessageInfo