Next.js Discord

Discord Forum

Select with state

Unanswered
Havana posted this in #help-forum
Open in Discord
HavanaOP
Hi all.

Using shadcn's <select> with some state in a client component. 

export function CreateClientForm({ clients }: any) {

    const [selectedClient, setSelectedClient] = useState(null);

    const handleClientChange = (clientId: string) => {
        const client = clients.find((client: any) => client.client_id === clientId);
        setSelectedClient(client);
    };

    const { pending } = useFormStatus();

    async function submitClient(formData: FormData) {
        createSalonClient(formData);
    }

    console.log(selectedClient)


does anybody know why setting the client in my form handler returns null?

1 Reply

HavanaOP
jsx is:

    return (
        <div>
            <div className='flex flex-col items-center mt-12 mb-12'>
                <h1>Client form</h1>
                <h2>Select a client, then apply a type to them</h2>
            </div>

            <form className='grid grid-cols-2' action={submitClient}>
                <div className='m-12'>
                    <Label htmlFor="select-client">Client to apply form to</Label>
                    <Select name='selectClient' onValueChange={handleClientChange}>
                        <SelectTrigger>
                            <SelectValue placeholder="Select client">
                                {selectedClient ? `${selectedClient.client_forename} ${selectedClient.client_surname}` : "Select client"}
                            </SelectValue>
                        </SelectTrigger>
                        <SelectContent>
                            <SelectGroup>
                                <SelectLabel>Client</SelectLabel>
                                {clients?.map((client) => (
                                    <SelectItem key={client.client_id} value={client.client_id}>
                                        {`${client.client_forename} ${client.client_surname}`}
                                    </SelectItem>
                                ))}
                            </SelectGroup>
                        </SelectContent>
                    </Select>
                </div>
            </form>
        </div>
    );
}