Get array of numeric values from checkbox group

[dyakonovr]

I apologize for my bad English. I have a problem: I'm writing filters for an online store, I use react-hook-form to make my form easy to use. There are three filters: price (from and to), rating (from and to), list of categories (lots of checkboxes). The first two filters are ok, but the third one is a problem. I need to get an array of category ids (numbers), but I get an array of strings. Although I have a function that leaves only the values I entered (dirty values) in the final object with filters, I don't want to run through the array in it, because it's wrong and kills scalability.

My code:

FiltersLayout.tsx

import {
  IMinMaxRange,
  IProductFitlers,
} from '@/hooks/features/products/filters.types';
import { useCategories } from '@/hooks/features/useCategories';
import { FormProvider, useForm } from 'react-hook-form';
import RangeFilter from '../RangeFilter/RangeFilter';
import { getDirtyValues } from "./filters.helper";
import CategoryFilter from "../CategoryFilter/CategoryFilter";
import { ICategory } from "@/types/category.types";

type FiltersFormValues = {
  categories?: ICategory[]; // false == []
  price?: IMinMaxRange;
  rating?: IMinMaxRange;
};

function FiltersLayout({
  setFilters,
}: {
  setFilters: (filters: IProductFitlers | null) => void;
}) {
  const methods = useForm<FiltersFormValues>({
    mode: 'onChange',
  });
  const { handleSubmit } = methods;

  const { categories } = useCategories();

  // Functions
  function onSubmit(data: FiltersFormValues) {
    console.log('dirty values', getDirtyValues(data));
  }
  // Functions END

  return (
    <FormProvider {...methods}>
      <form className="flex flex-col gap-5" onSubmit={handleSubmit(onSubmit)}>
        <RangeFilter
          filterTitle="Price"
          registerMinInputKey="price.min"
          registerMaxInputKey="price.max"
          min="0"
          max="10000"
          step="1"
        />
        {categories && <CategoryFilter data={categories} />}
        <RangeFilter
          filterTitle="Rating"
          registerMinInputKey="rating.min"
          registerMaxInputKey="rating.max"
          min="0"
          max="1000"
          step="1"
        />
        <button type="submit" className="link w-fit px-5 py-1">
          Show
        </button>
      </form>
    </FormProvider>
  );
}

export default FiltersLayout;

CategoriesFilter.tsx

import { ScrollArea } from '@/components/ui/scroll-area';
import { ICategory } from '@/types/category.types';
import CategoryCheckbox from './CategoryCheckbox';

interface ICategoryFilterProps {
  data: ICategory[];
}

function CategoryFilter({ data }: ICategoryFilterProps) {
  return (
    <div>
      <p>Category</p>
      <div className="mt-2">
        <ScrollArea>
          {data &&
            data.map((category) => (
              <CategoryCheckbox
                registerKey="categories"
                category={category}
                key={category.id}
              />
            ))}
        </ScrollArea>
      </div>
    </div>
  );
}

export default CategoryFilter;

CategoryCheckbox.tsx

import { Separator } from '@/components/ui/separator';
import { ICategory } from '@/types/category.types';
import { Controller, useFormContext } from 'react-hook-form';

type ICategoryCheckboxProps = {
  registerKey: string;
  category: ICategory;
};

function CategoryCheckbox({ registerKey, category }: ICategoryCheckboxProps) {
  const { register, control } = useFormContext();

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-2">
        <label className="text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
          <Controller
            name={registerKey}
            control={control}
            render={() => (
              <input
                type="checkbox"
                {...register(registerKey)}
                value={category.id}
                className="mr-2"
              />
            )}
          />
          {category.name}
        </label>
      </div>
      <Separator className="mb-2" />
    </div>
  );
}

export default CategoryCheckbox;

The form object I get after I select a few categories:

dirty values {categories: ['1', '2']}

I want to:

dirty values {categories: [1, 2]}

[kamranayub]

I have found by default it seems like a number[] value field doesn't work with checkboxes. They need to be transformed to string values, either on the server-side or from global state. I don't think setValueAs works either with checkboxes.

There might be a better way, but this feels like a bug as it took me awhile to figure out why the checkboxes weren't checked when the values clearly matched. Once I transformed it into a string[] field, it worked.

[xelaz]

Yes, I now have the same problem. After moving my code from React Final Form, I now need to create two types: one from the backend (GraphQL) and one for FormData. I need to convert the data for the form and, after editing, convert it back.

Not Mohamed comes to the mountain, no the mountain must come to Mohamed.