Reactのリストとフォーム | React入門

リストを表示する

配列をmapでJSXへ変換します。データのIDなど、項目に固有で安定した値をkeyにします。

商品一覧JSX

const products = [
  { id: 1, name: 'ノート', price: 300 },
  { id: 2, name: 'ペン', price: 120 },
];

return <ul>{products.map(product =>
  <li key={product.id}>{product.name}: {product.price}円</li>
)}</ul>;

実行結果OUTPUT

ノート: 300円
ペン: 120円

controlled form

入力値をstateへ保存し、inputのvalueとonChangeをstateへ結び付けます。Reactが入力欄の値を管理するため、検証やリセットを行いやすくなります。

フォーム入力JSX

import { useState } from 'react';

const [email, setEmail] = useState('');

return (
  <label>
    メールアドレス
    <input type="email" value={email}
      onChange={event => setEmail(event.target.value)} />
  </label>
);

フォーム送信ではonSubmitを使い、event.preventDefault()でページ遷移を止めます。buttonの既定typeは送信なので、キャンセルボタンなどはtype="button"にします。

入力を検証する

送信時にtrimした値を確認し、問題があればエラーメッセージを表示します。サーバー側の検証も必ず必要ですが、入力中の案内としてクライアント側の検証を使います。

空入力のチェックJSX

function handleSubmit(event) {
  event.preventDefault();
  const value = text.trim();
  if (value === '') {
    setError('内容を入力してください');
    return;
  }
  setError('');
  addItem(value);
}

エラー文は入力欄の近くに置き、aria-invalidやaria-describedbyを付けると支援技術にも状態を伝えられます。

Todoを完成させる

追加・完了・削除を持つTodoでは、項目をオブジェクトで管理します。更新時は対象IDだけを変更し、他の項目はそのまま返します。

完了と削除JSX

function toggleTodo(id) {
  setTodos(current => current.map(todo =>
    todo.id === id ? { ...todo, done: !todo.done } : todo
  ));
}

function removeTodo(id) {
  setTodos(current => current.filter(todo => todo.id !== id));
}

ここまでで、Reactの基本を使った小さなアプリを作れるようになります。次はEffectとデータ取得で、外部APIとの接続を扱います。

React入門の講座一覧

リストを表示する

controlled form

入力を検証する

Todoを完成させる