Idek at this point

ui-subsystem/src/components/Landing.js

@@ -18,7 +18,8 @@ function Landing() {
     // For Data Transmission testing purposes
 
     const handleClickSendMessage = () => {
-        sendMessage('Hello ESP32!');    
+        const jsonMsg = JSON.stringify(plants)
+        sendMessage(jsonMsg);    
       };
 
     const connectionStatus = {
@@ -72,6 +73,7 @@ function Landing() {
           try {
             // Parse the message data as JSON and update the state
             const data = JSON.parse(lastMessage.data);
+            console.log(data)
             setDataObjects(data);
           } catch (e) {
             console.error("Failed to parse JSON:", e);
@@ -81,7 +83,8 @@ function Landing() {
 
     useEffect(() => {
     // Log the updated 'plants' state whenever it changes
-    console.log(plants);
+    console.log(JSON.stringify(plants));
+    console.log(plants)
     }, [plants]);
    
 
@@ -100,7 +103,7 @@ function Landing() {
                                 </button>
                             </div>
                             <div>
-                                <p>Max Water Usage: {maxWaterUsage}</p>
+                                <p>Max Water Usage: {dataObjects.usage}</p>
                             </div>
                             <div>
                                 {lastMessage ? <p>Last message from server: {lastMessage.data}</p> : "Waiting for message"}
@@ -125,7 +128,7 @@ function Landing() {
                             <div className='plant-container'>
                                 {plants.length > 0 ? (plants.map((plant, index) => (
                                     <div className='new-plant' key={index}>
-                                        <p className='new-plant-text'>Plant {index+1}: {plant.name}</p>
+                                        <p className='new-plant-text'>Plant {index}: {plant.name}</p>
                                         <p className='new-plant-text'>{plant.minMoistureLevel}</p>
                                         <p className='new-plant-text'>{plant.wateringHours}</p>
                                         <p className='new-plant-text'>{plant.wateringDays}</p>
@@ -140,7 +143,7 @@ function Landing() {
                             <p className='health-header'>Plant Health</p>
                             <div className='adjust'>
                                 <div className='health-container'>
-                                    {dataObjects.map((item, index) => (
+                                    {dataObjects.plant_data.map((item, index) => (
                                         <p key={index} className='health-text'> Address: {item.address} <br /> Health: {item.health} </p>
                                     ))}
                                 </div>

ui-subsystem/src/components/Modal.js

 // Modal.js
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import Modal from 'react-modal';
 
 Modal.setAppElement('#root'); // Set the root element for accessibility
@@ -14,11 +14,8 @@ const MyModal = ({ isOpen, closeModal, sendDataToParent }) => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    // Do something with formData (e.g., send it to the server)
-    sendDataToParent(formData); 
-    closeModal();
-  };
-
+    sendDataToParent(formData); // closeModal will be called inside receiveData now
+};
 
 
   return (
@@ -26,39 +23,48 @@ const MyModal = ({ isOpen, closeModal, sendDataToParent }) => {
       <h2>Fill in Information</h2>
       
       <form onSubmit={handleSubmit}>
-        <label htmlFor="Plant Name">Plant Name:</label>
+        <label htmlFor="plantName">Plant Name:</label>
         <input
           type="text"
-          id="Plant Name"
-          name="Plant Name"
-          value={formData['Plant Name']}
+          id="plantName"
+          name="plantName"
+          value={formData['plantName'] || ''}
           onChange={handleInputChange}
         />
 
-        <label htmlFor="Max Water Usage">Max Water Usage:</label>
+        {/* <label htmlFor="maxWaterUsage">Max Water Usage:</label>
+        <input
+          type="text"
+          id="maxWaterUsage"
+          name="maxWaterUsage"
+          value={formData['maxWaterUsage'] || ''}
+          onChange={handleInputChange}
+        /> */}
+
+        <label htmlFor="minMoistureLevel">Min Moisture Level:</label>
         <input
           type="text"
-          id="Max Water Usage"
-          name="Max Water Usage"
-          value={formData['Max Water Usage']}
+          id="minMoistureLevel"
+          name="minMoistureLevel"
+          value={formData['minMoistureLevel'] || ''}
           onChange={handleInputChange}
         />
 
-        <label htmlFor="Min Moisture Level">Min Moisture Level:</label>
+        <label htmlFor="wateringHours">Watering Hours:</label>
         <input
           type="text"
-          id="Min Moisture Level"
-          name="Min Moisture Level"
-          value={formData['Min Moisture Level']}
+          id="wateringHours"
+          name="wateringHours"
+          value={formData['wateringHours'] || ''}
           onChange={handleInputChange}
         />
 
-        <label htmlFor="Watering Hours">Watering Hours:</label>
+        <label htmlFor="wateringDays">Watering Days:</label>
         <input
           type="text"
-          id="Watering Hours"
-          name="Watering Hours"
-          value={formData['Watering Hours']}
+          id="wateringDays"
+          name="wateringDays"
+          value={formData['wateringDays'] || ''}
           onChange={handleInputChange}
         />