React チェックボックス実装時に uncontrolled input が出た時の対処

チェックボックス実装時に uncontrolled input のwarnig が出た

チェックボックスをクリックすると下記の warnig が出た

component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

対象コード

 <input
    type='checkbox'
    id={companyId}
    checked={isChecked(companyId)}
    onChange={() => onChangeHandler(companyId)}
/>

調査

エラー内容をそのままググる。

上記記事などを参考に、State の値が、nullかundefinedになってしまうタイミングがないように state へ初期値をもたせたりしたがNGだった。

少し抽象化すると state null か undefined が入ることがNGなのではなく、input の value へ falsy な値が入ることが問題なのでは、と仮説が出てきた。

修正

 <input
    type='checkbox'
    id={companyId}
    checked={isChecked(companyId) || false}
    onChange={() => onChangeHandler(companyId)}
/>

falsy な値が入らないようにした。

感想

• 正直これが正解なのかわからない
• input text のエラーに関しての記事は多くあったが、checkbox に関しての記事を見つけることができず苦労した。