0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-11-03

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をかじっている人は特にお気をつけください。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?