Shadcn/ui Select - change state when user selects item

Question

I am using shadnui and trying to do something very simple > make the user choose from a list of 1 to 6. I want to update the state when the user selects a number.

I found this thread Shadcn ui select component state not updating after change So i tried this:

"use client"
import { useState } from "react"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"


export default function Home() {

  const [practices, setPractices] = useState(1)

  return (
    <>
      <h1>{practices}</h1>
      <div className="flex justify-between w-2/3">Aantal praktijken
      <Select>
  <SelectTrigger className="w-[60px]">
    <SelectValue placeholder="0" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem defaultValue="1" onValueChange={() => ( value=> setPractices(value))}>1</SelectItem>
    <SelectItem value="2" onValueChange={() => ( value=> setPractices(value))} >2</SelectItem>
    <SelectItem value="3" onValueChange={() => ( value=> setPractices(value))} >3</SelectItem>
    <SelectItem value="4" >4</SelectItem>
    <SelectItem value="5" >5</SelectItem>
    <SelectItem value="6" >6</SelectItem>
  </SelectContent>
</Select></div>
    </>
  );
}

It doesn't work. Anyone any idea? I've tried a bunch of things.

Polysyllabic

Answer 1

onValueChange should be given to the <Select>. You can find in the Radix UI docs which shad-cn uses behind the hood.

It sends a string value so you will either have to parse to int before setting the state or just have the state as a string type.

that is

  const [practices, setPractices] = useState(1);

  const handleStringToInt = (value: string) => {
    setPractices(parseInt(value))
  }

...
        <Select onValueChange={handleStringToInt}>
          <SelectTrigger className="w-[60px]">
            <SelectValue placeholder="0" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">1</SelectItem>
            <SelectItem value="2">2</SelectItem>
            <SelectItem value="3">3</SelectItem>
            <SelectItem value="4">4</SelectItem>
            <SelectItem value="5">5</SelectItem>
            <SelectItem value="6">6</SelectItem>
          </SelectContent>
        </Select>

or

  const [practices, setPractices] = useState("1");

  <Select onValueChange={setPractices}>

<Select onValueChange={setPractices}> is equivlent to <Select onValueChange={(val) => setPractices(val)}> here

Stackblitz

Tomfool

thank you so much, took me hours already. that is a very clear and helpful solution, works like a charm now! really appreciated! – Polysyllabic

yeah i too have been in the same situation with shadcn – Tomfool