From d9a7362d6b883f1f3890c84097fe063cdb1da1a9 Mon Sep 17 00:00:00 2001
From: Starstrike <ryderjj89@outlook.com>
Date: Tue, 29 Apr 2025 20:14:07 -0400
Subject: [PATCH] Improve needed_items handling in RSVPForm

---
 frontend/src/components/RSVPForm.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/RSVPForm.tsx b/frontend/src/components/RSVPForm.tsx
index a827185..e369e22 100644
--- a/frontend/src/components/RSVPForm.tsx
+++ b/frontend/src/components/RSVPForm.tsx
@@ -47,8 +47,22 @@ const RSVPForm: React.FC = () => {
     const fetchEventDetails = async () => {
       try {
         const response = await axios.get(`/api/events/${slug}`);
-        setNeededItems(response.data.needed_items || []);
+        console.log('API Response:', response.data);
+        
+        // Ensure needed_items is an array
+        let items: string[] = [];
+        if (response.data.needed_items) {
+          items = Array.isArray(response.data.needed_items) 
+            ? response.data.needed_items 
+            : typeof response.data.needed_items === 'string'
+              ? response.data.needed_items.split(',').map(item => item.trim())
+              : [];
+        }
+        
+        console.log('Processed needed items:', items);
+        setNeededItems(items);
       } catch (error) {
+        console.error('Error fetching event details:', error);
         setError('Failed to load event details');
         setNeededItems([]);
       }
@@ -56,6 +70,10 @@ const RSVPForm: React.FC = () => {
     fetchEventDetails();
   }, [slug]);
 
+  useEffect(() => {
+    console.log('Current neededItems state:', neededItems);
+  }, [neededItems]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData(prev => ({
@@ -74,7 +92,9 @@ const RSVPForm: React.FC = () => {
 
   const handleItemsChange = (e: SelectChangeEvent<string[]>) => {
     const value = e.target.value;
-    const itemsArray = Array.isArray(value) ? value : typeof value === 'string' ? [value] : [];
+    console.log('Select onChange value:', value);
+    const itemsArray = Array.isArray(value) ? value : typeof value === 'string' ? value.split(',').map(item => item.trim()) : [];
+    console.log('Processed items array:', itemsArray);
     setFormData(prev => ({
       ...prev,
       items_bringing: itemsArray