Return messages in server actions are not shown or displayed

[slow spade]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[glass kestrel]

Form Submission

    'use client'
    
    interface FormData {
      name: string;
      ...the rest of the data
    }
    
    const initialState = {
      message: null,
    }
    
    function SubmitButton() {
      const { pending } = useFormStatus()
    
      return (
        <button type="submit" aria-disabled={pending}>
          Submit
        </button>
      )
    }
    
    export default function WaterStationProfileForm() {
      const [state, formAction] = useFormState(addWaterStation, initialState)
      const [formValue, setFormValue] = useState<FormData>({
       ...rest of the data
      });
    
      return (
        <div className="container mx-auto p-4">
                
          <p aria-live="polite" className="sr-only" role="status">
            {state?.message}
          </p>
    
        <form action={formAction}>
        <MyInput
            id="name"
            label="Water Station Name" 
            name="name"
            value={formValue.name}
            onChange={(event) => setFormValue({ ...formValue, [event.target.name]: event.target.value })}
            required 
            type="text" 
            errors={state.errors}
          /> 
          ... the rest of the input fields
          <SubmitButton />
        </form>
        </div>
      );
    }```

Server action

    
    import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
    import { revalidatePath } from "next/cache";
    import { cookies } from "next/headers"
    
    
    export default async function addWaterStation(prevState: any, formData: FormData): Promise<{ message: string }> {    const supabase =createServerComponentClient({cookies})
        const {data: {user}} = await supabase.auth.getUser();
        const formDataAddress = `${formData.get('buildingNumber')}, ${formData.get('street')}, ${formData.get('zone')}`
        console.log(formData, "formData")
    
        try{
            const station_name = formData.get('name')
            ...rest of the data
            
            const {data, error} = await supabase.from('water_refilling_station')
                .insert({
                    station_name,
                    ...rest of the data
                }).select()
            
            if(error){
                return {message: `${error.message}  - unable to save`}
            } 
    
            revalidatePath('/water_station')
            return { message: `Succesfully added the data` }
        }catch(e){
            return {message: "Failed to submit the form."}
        }
    
    }```

Reusable component for the input fields: