React Hook FormでcheckboxのグループにsetValueできないときの対処法

※本ページはプロモーションが含まれています

公開日：2022/1/31 更新日：2022/1/31

React Hook Form 7で複数グループのcheckboxを使っているのですが、DBから取り出した値をsateValueしようとしても何故かセットできない事態が起きました。

原因はsetValueしようとした配列がnumber[]だったこと。

checkBoxのvalueをnumberのidにしていたので、setValueする値もnbumberになっていました。

// ダメ
const value = [ 1, 2, 3 ];
setValue('checkBoxName', value);

// OK
const value = [  '1', '2', '3' ];
setValue('checkBoxName', value);

// number[]をstring[]に
const value = [ 1, 2, 3 ];
const stringValue = value.map((item)=> return item.toString());
setValue('checkBoxName', stringValue);

おわりに

checkboxのグループにはsetValueできないのかと思っていましたが、valueをstringで作った時はsetValueできたので原因に気づけました。

この対処だけで半日使ってしまった…。