Theo's Typesafe Cult•7mo ago

Using Radix Select with objects

I am creating a Select component with Radix. I wanted to select from an array of objects of type {unit: "minute" | "hour", value:number}. Seems like value always needs to be a string though. What I'm thinking of doing -

<Select
  value={
    taskTemplateCtx.state.estimate.value + " " +
    taskTemplateCtx.state.estimate.unit
  }
  onValueChange={(value) => {
    const e = estimateOptions.find(
      (estimate) => estimate.value + " " + estimate.unit === value
    );
    if (e)
      taskTemplateCtx.dispatch({
        type: "estimate_update",
        estimate: e,
      });
  }}
>
  <SelectTrigger className="w-fit gap-2">
    <ClockIcon className="h-4 w-4 text-gray-700" />
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {/* <SelectLabel>Fruits</SelectLabel> */}
      {estimateOptions.map((estimate) => (
        <SelectItem
          value={estimate.value + " " + estimate.unit}
        >
          {estimate.value +
            " " +
            (estimate.unit === "minute" ? "min" : "hr")}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

<Select
  value={
    taskTemplateCtx.state.estimate.value + " " +
    taskTemplateCtx.state.estimate.unit
  }
  onValueChange={(value) => {
    const e = estimateOptions.find(
      (estimate) => estimate.value + " " + estimate.unit === value
    );
    if (e)
      taskTemplateCtx.dispatch({
        type: "estimate_update",
        estimate: e,
      });
  }}
>
  <SelectTrigger className="w-fit gap-2">
    <ClockIcon className="h-4 w-4 text-gray-700" />
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {/* <SelectLabel>Fruits</SelectLabel> */}
      {estimateOptions.map((estimate) => (
        <SelectItem
          value={estimate.value + " " + estimate.unit}
        >
          {estimate.value +
            " " +
            (estimate.unit === "minute" ? "min" : "hr")}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

Does this make sense? Feels wrong ..

2 Replies

iDarkLightning•7mo ago

Fairly common practice to use an id as the value and then index using that

jairrard•7mo ago

Ok thanks

Gaming

Programming

Using Radix Select with objects