【React / Chakra-UI】CheckboxGroupでisChecked={true}をしてもチェックされていない

個人的備忘録です。

やりたいこと

• fetchしてきた配列データを、CheckboxGroupとして、Checkboxをmapで回して、checkedに一致したデータがあれば表示時にチェック状態にしたい
• チェック済みかの情報は、query として渡す

環境

• React: 17.0.2
• Next: 11.1.3
• @chakra-ui/react: ^1.8.5

調査

• https://chakra-ui.com/docs/components/form/checkbox#checkboxgroup-props
• CheckboxGroup には isChecked props がない！
• https://github.com/chakra-ui/chakra-ui/issues/283
• CheckboxGroupの時は、Groupレベルへチェック済みの配列を渡さないといけない

<CheckboxGroup value={checkedValueList}>
	<Checkbox value={item.value}>
</CheckboxGroup>

• このやり方にすると、クリックしてもチェックが外れない

原因

• そもそも、isChecked が props になかった

解決方法

• useForm の reset を使って CheckboxGroup に設定されている変数へセットする

reset について

サンプルコード

import { ~~~ } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { Foo, FormInput } from './types';

interface Props = {
  isOpen;
  onClose;
  // query
  searchedFoo?: string[];
};

export const Modal = ({ isOpen, onClose, searchedFoo }: Props) => {
  // 省略

  const [foo, setFoo] = useState<Foo[]>();

  const { handleSubmit, control, reset } = useForm<FormInputData>();

  useEffect(() => {
    reset({
      foo: searchedFoo,
    });
  }, [reset, searchedFoo]);

  const onSubmit = (data: FormInputData) => {
    // 処理
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <ModalContent>
          <ModalHeader>
            <Text>Title</Text>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody className={styles.modal__search_body}>
            // 省略
            <FormControl>
                <FormLabel>
                  Foo
                </FormLabel>
                <Controller
                  name="foo"
                  control={control}
                  render={({ field }) => (
                    <CheckboxGroup {...field}>
                      <Box>
                        {foo &&
                          foo.map((item) => (
                            <Checkbox
                              value={item.code}
                              key={item.code}
                            >
                              {item.name}
                            </Checkbox>
                          ))}
                      </Box>
                    </CheckboxGroup>
                  )}
                />
              </FormControl>
          </ModalBody>

          <ModalFooter>
            <Box>
              <MwButton type={'submit'}>Submit</MwButton>
            </Box>
          </ModalFooter>
        </ModalContent>
      </form>
    </Modal>
  );
};