Unable to set default value for the Select component

[donymvarkey]

I am trying to set a default value for the select component when the user interacts with the UI. For eg: I have a Select component that will sow all the HTTP methods as dropdown and initially the default value works as I have set a default value in a state variable. But if I click on a button that will change the state, it doesn't update the value shown in the Select field. Below is my Code for the select.

<Select
  defaultValue={method}
  onValueChange={(value) => {
    dispatch(setMethod(value));
  }}
>
  <SelectTrigger
    className={`w-[150px] border-0 shadow-none h-7 ${getHttpMethodTextColor(
      method
    )} font-semibold font-code`}
  >
    <SelectValue defaultValue={method} />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {HTTP_METHODS.map((method, index) => (
        <SelectItem
          key={index}
          className={`${method?.color} font-medium font-code`}
          value={method?.value}
        >
          {method.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

When i console log the method variable, I can see that it's value changes as expected. But it is not being rendered in the UI? Any ideas? Stuck on this for a while. Any help will be appreciated. Thanks in advance.

[ZergaAbderrezak]

The issue is with defaultValue – it doesn't update after the initial render (uncontrolled). Switch to using value instead (controlled), like this:

<Select
  value={method} // Changed from defaultValue to value
  onValueChange={(value) => {
    dispatch(setMethod(value));
  }}
>

This will ensure the Select reflects state changes. Hope that helps! 😊