入力の反響（Echo）

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 29/42。

入力テキストが state に保持されたら、それを任意の場所に表示するには波括弧を使うだけです。入力するにつれて更新される挨拶の例です：

const [name, setName] = useState('');

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

三項演算子によって、不自然な Hello, ! の代わりに、親切なプロンプトで空のボックスを処理します。この `input` とリアルタイム出力を組み合わせたパターンは、検索ボックス、登録フォーム、エディターなどでよく使われています。

チャレンジ

簡単

リアルタイムで挨拶を表示するコンポーネントを作成しましょう。

空の文字列で初期化する name state を追加し、入力フィールド（id="name"）を制御コンポーネントにしてください: value + onChange。
段落（id="echo"）には、入力ボックスが空のときは Type your name を表示し、それ以外の場合は入力された名前を含めて Hello, ...! と表示します（例: Ada と入力した場合 → Hello, Ada!）。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>