😎

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

1 min read

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

JSXはHTMLを知っている人であればある程度かけてしまうので、HTMLがかける人はHTMLとJSXは全く別物ぐらいに意識する

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

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

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

ここより記述されるコード例は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

ログインするとコメントできます