コース一覧
Reactで状態・フォーム・リストを扱う
第4章クイズ

Reactで状態・フォーム・リストを扱う

useState、イベントハンドラ、制御されたinput、フォーム送信とバリデーション、mapによるリスト表示、key、条件レンダリング、空状態を扱う全25レッスンのコースです。入力・絞り込み・ダークモードへ反応する作品ギャラリーを作り、ユーザー操作で変化するUIの基本を身につけます。

1
state(useState)
01. なぜstateが必要か15分
02. useState15分
03. ボタンで更新15分
04. 複数のstate15分
05. オブジェクトのstate15分
06. 配列のstate15分
07. 再レンダリングの仕組み10分
08. つくる - ダークモード切替20分
09. 第4章クイズ15分
2
イベントとフォーム
01. イベントハンドラ15分
02. イベントオブジェクト15分
03. 制御されたinput15分
04. 複数の入力15分
05. フォーム送信15分
06. バリデーション15分
07. つくる - 問い合わせフォーム20分
08. 第5章クイズ15分
3
リストと条件レンダリング
01. mapでリスト描画15分
02. key15分
03. 条件レンダリング(&&)15分
04. 出し分け(三項)15分
05. 空状態15分
06. 絞り込みUI15分
07. つくる - ギャラリーReact版20分
08. 第6章クイズ15分

Reactで状態・フォーム・リストを扱う

01なぜstateが必要か
02useState
03ボタンで更新
04複数のstate
05オブジェクトのstate
06配列のstate
07再レンダリングの仕組み
08つくる - ダークモード切替
09第4章クイズ
10イベントハンドラ
11イベントオブジェクト
12制御されたinput
13複数の入力
14フォーム送信
15バリデーション
16つくる - 問い合わせフォーム
17第5章クイズ
18mapでリスト描画
19key
20条件レンダリング(&&)
21出し分け(三項)
22空状態
23絞り込みUI
24つくる - ギャラリーReact版
25第6章クイズ

第4章クイズ

クイズ1

コンポーネントの中で let likes = 0 と宣言し、クリックで likes = likes + 1 と書きかえました。コンソールには 1、2、3 と出ますが、画面の数字は 0 のままです。理由として正しいものはどれですか。

クイズ2

const [likes, setLikes] = useState(0) と書いたとき、likes と setLikes にはそれぞれ何が入っていますか。

クイズ3

likes が 0 のとき、1 回のクリックで次の 2 行を実行しました。likes は最終的にいくつになりますか。

setLikes(likes + 1); setLikes(likes + 1);

クイズ4

profile が { name: "あおい", title: "Web エンジニア", bio: "..." } のとき、title だけを変えて画面に反映させる書き方はどれですか。

クイズ5

配列の state に 1 件追加したいときの書き方として正しいものはどれですか。

未回答の問題は、不正解として正解と解説のみ表示します

ログインが必要です

クイズに回答するにはログインしてください。