😎

JSXとHTMLを混同するな!React初学者がハマるポイント。

2021/11/04に公開

Reactを勉強している時に気をつけるポイントとして強く思ったのが…
HTMLとJSXを混同しないことです!

そうすることでスムーズに学習が進みます。
僕は恥ずかしいことにそれに気が付かず…

  • Reactの仕様でエラーが出ているのかな?
  • React-Hook-Formの書き方難しい!

と勝手に沼にハマっておりました…

例えば下記のような記述(詳細割愛)

<input id="spring" type="radio" value="1" checked {...register("season", { required: true })} />

正しい記述は下記の通りです。

<input id="spring" type="radio" value="1" defaultChecked {...register("season", { required: true })} />

HTMLではcheckedですが、JSXではdefaultCheckedとなります。
表示はされるのですが、挙動がおかしくなります。
おかしくなるというのはクリックしてもクリックした項目がチェックされません…

僕がドキュメントの一部を見逃していたのが悪いのですが…
初学者でHTMLをかじっている人は特にお気をつけください。

https://reactjs.org/docs/uncontrolled-components.html#default-values

Discussion