Next.js Discord

Discord Forum

a data from select value can be seen on the component but gone in the server action

Answered
Jenn posted this in #help-forum
Open in Discord
JennOP
I am using Nextjs14 and Supabase.

I have this select where the user can choose from. I am also passing it on the formValue which will be received on the server actions as FormData. Now, on the component, I can see the data of the formValue and the barangay field is there. However, passing in on the server actions, the barangay field can no longer be seen on the server actions.

This question is also posted on: https://stackoverflow.com/questions/77407716/values-of-the-form-can-be-seen-on-the-component-but-when-passing-it-to-the-serv

interface FormData {
  ...rest of the values
  barangay: string; 
}

const initialState = {
  message: null,
}

export default function WaterStationProfileForm() {
  const [state, formAction] = useFormState(addWaterStation, initialState)
  const [selectedBarangay, setSelectedBarangay] = useState<string>(''); // Rename the state variable


  const handleBarangaySelection = (value: string) => {
    setSelectedBarangay(value); //get the selected barangay
  }

  const [formValue, setFormValue] = useState<FormData>({
    ...rest of the values
    barangay: "",
  });
 

  useEffect(() => {
    setFormValue(prevFormValue => ({
      ...prevFormValue,
      barangay: selectedBarangay
    }))
  },[selectedBarangay])

  console.log(formValue, "form value") // I can see the value of barangay here


  return (
    <div className="container mx-auto p-4">

    <form action={formAction}>
      ...the rest of the inputs
      <DropdownList
        options={barangay}
        value={formValue.barangay} 
        selected={selectedBarangay} 
        onSelect={handleBarangaySelection}
        required={true}
        placeholder="Please select an option"
        name="barangay"
      />
      <SubmitButton />
    </form>
    </div>
  );
}
Answered by Jenn
Oh got it already solved on SO: I need a hidden input as server action only receives values from the input
View full answer

7 Replies

JennOP
This is the server action codes:
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')

        const {data, error} = await supabase.from('water_refilling_station')
            .insert({
                ...rest of the inputs here
                barangay,
            }).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."}
    }

}
alfonsus
can you add syntax highlighting
like this
```ts
/ paste code here
```
@alfonsus like this \`\`\`ts / paste code here \`\`\`
JennOP
done editing it
alfonsus
where is the server action?
JennOP
Oh got it already solved on SO: I need a hidden input as server action only receives values from the input
Answer