Next.js make server action with Shadcn ui select

Question

I'm trying to make a server action with data from Shadcn ui select. However, when I try to console log the result, I'm getting this:

FormData { [Symbol(state)]: [ { name: '$ACTION_ID_44456456465464646...', value: '' } ] }

The UI code:

    "use client";

import { Button } from "@/components/ui/button";
import * as React from "react";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";

import { Submit } from "@/lib/actions";

export default function Home() {
    return (
            <form action={Submit}>
                <div className="grid w-full items-center">
                    <div className="flex flex-col space-y-1.5">
                        <Label htmlFor="framework">Genre</Label>
                        <Select>
                            <SelectTrigger
                                id="framework"
                                name="framework"
                            >
                                <SelectValue placeholder="Select" />
                            </SelectTrigger>

                            <SelectContent position="popper">
                                <SelectItem value="next">
                                    Next.js
                                </SelectItem>
                                <SelectItem value="sveltekit">
                                    SvelteKit
                                </SelectItem>
                                <SelectItem value="astro">
                                    Astro
                                </SelectItem>
                                <SelectItem value="nuxt">
                                    Nuxt.js
                                </SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>
                <Button type="submit">Find</Button>
            </form>
    );
}

The server action code:

"use server";

export async function Submit(data?: FormData) {
    console.log(data);
}

I have accomplished getting the value on the client side, but that doesn't meet my needs.

Answer 1

You need to add the name attribute to the Select instead of SelectTrigger

Try modifying the select to below

<Select name="framework">
 <SelectTrigger id="framework">
    <SelectValue placeholder="Select" />
  </SelectTrigger>

  <SelectContent position="popper">
    <SelectItem value="next">Next.js</SelectItem>
    <SelectItem value="sveltekit">SvelteKit</SelectItem>
    <SelectItem value="astro">Astro</SelectItem>
    <SelectItem value="nuxt">Nuxt.js</SelectItem>
  </SelectContent>
</Select>;

Then you can get the value of select using data.get("framework"); in your @/lib/actions file.