入力エラーを表示せよ

中段 / 目安 30分

陽葵さんが少し困った顔で言います。「名前が空のまま予約ボタンを押した人には、優しく赤字で教えてあげて」。

フォームが state と繋がったので、次は送られてきた内容を確かめて、駄目なら止める段です。ここで押さえるのは2つ、送信の止め方とエラーの出し方です。

form の送信ボタンを押すと、ブラウザは既定の動きとしてページを読み込み直そうとします。React の画面はそれで丸ごと作り直されてしまうので、まず止めます。onSubmit に渡す関数の先頭で e.preventDefault() を呼んでください。これは素の JavaScript のときと同じ作法です。

止めたら中身を見ます。名前が空かどうかは name.trim() === "" で判定します。trim() を挟むのは、空白だけ打って送る人を通さないためです。「 」は空文字ではないので、name === "" だけでは抜けられてしまいます。

そしてエラーもまた state です。ここが React らしいところです。素の JavaScript なら「エラーの行に文字を入れる」と考えますが、React では「エラーの内容を state に入れる」と考えます。画面はその state に従って勝手に変わります。

条件付きの表示は && を使います。

error が空文字のとき、&& の左が偽なので右は評価されず、この位置には何も描かれません。文字が入っているときだけ段落が現れます。要素そのものを出したり消したりするのが React の条件表示で、素の JavaScript のように中身を空にして枠だけ残す形とは別物です。

忘れやすいのは通ったときにエラーを消すことです。エラー文は state に入っている限り残り続けます。検証を通ったら setError("") を書いてください。逆に、駄目だったときは完了メッセージのほうを出さないようにします。この2つを対で面倒みないと、「エラーが出ているのに完了とも出ている」画面ができます。

完成条件

• 名前を useState で持ち、id が name の入力欄を制御する
• form の onSubmit で e.preventDefault() を呼び、ページの読み込み直しを止める
• 名前が空、または空白だけなら className が error の要素に「お名前を入力してください」と出す
• 検証を通ったら、エラーは消して className が done の要素に予約を受け付けた文を出す。文には入力された名前を含める
• エラーが出ているあいだは完了の文を出さない

進め方

まず何も入れずに送ってエラーが出るところまで作り、次に名前を入れて完了が出るところ、最後にもう一度空にして完了が消えるところ、の順で確かめてください。3つめが一番落とし穴です。

エラーと完了の両方を別々の state で持つやり方でも、1つの state にまとめるやり方でも構いません。大事なのは、画面のどの状態も state から一意に決まることです。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。