JSでチェックボックスのチェックがはずれない

Question

お世話になっております。
初歩的な質問ですみません。

現在JS(React,gatsby)でチェックボックス関係の実装をしているのですが、郵送とメールの選択肢があり、デフォルトでメールにチェックが入っている仕様にしたいと思っております。

「デフォルトでチェックが入っている」
は実現できたのですが、再度チェックをクリックしてもチェックボックスが外れなくなってしまいました。。。

しかし、true,falseの切り替えは機能しているようで、画像のように「メールにチェックが入っていると、メールアドレスが必須項目になる、チェックを外したら必須が外れる。確かにアドレスは必須から消えたがチェックボックスがチェックされたまま」という状態になってしまいました（前後の写真を添付します。）

↓チェックが入っているのでアドレス入力必須

↓再度押すとアドレス入力項目が消えるがチェックが入ったまま

どうすればいいでしょうか。

以下実装コードです。

const ContactPage = ({ location }) => {
  const [isEmail, setIsEmail] = useState(true);
  const [isPost, setIsPost] = useState(false);
  const formRef = React.useRef(null);

  const handleActiveEmail = () => {
    setIsEmail(!isEmail);
  };

  const handleActivePost = () => {
    setIsPost(!isPost);
  };

~


<div className="form-check">
  <input type="checkbox" name="how_to[]" id="how_to_email" value="how_to_email" className="" checked onClick={() => {handleActiveEmail();}} />
  <label htmlFor="how_to_email" className="">メール</label>
</div>
<div className="form-check">
  <input type="checkbox" name="how_to[]" id="how_to_post" value="how_to_post" className="" onClick={() => {handleActivePost();}}/>
  <label htmlFor="how_to_post" className="">郵送</label>
</div>

~

Answer 1

Reactでcheckedと書くと、それはReactが状態を管理するものとみなされますので、このチェックボックスの状態は「常にチェック状態で固定」となります（checked={true}と書くのと同じ意味です）。

取るべき方針は2つに1つです。

• React内からチェックの状態を使う場合、useStateで状態を管理する変数を作ってonChangeで変更する
• 最初に描画してしまえばあとはReact内から値を使わない場合、defaultCheckedで書く