React を触ってみる

リアクティビティー

リアクティブについては Vue の項目で触れていて、説明できているためそちらを参照する。

ユーザー名一覧があって、そこからユーザーを一人ずつ追加できるUIをつくっていきます。完成イメージはこちら

 const [users, setUsers] = useState([{ name: "はると" }, { name: "あおい" }]);

<ul>
  {users.map((user) => (
    <li>{user.name}</li>
  ))}
</ul>

本来であればli要素にkey属性を付与するべきですがここでは省略した解説になります。

ユーザーを追加します。<button>要素を使って押されたらaddUser関数を呼びます。

<button onClick={addUser}>追加</button>

const addUser = () => {
  setUsers((user) => [...user, { name: "ひまり" }]);
};

...userのように配列の値の前に...を入れることでその配列がひとつずつ展開されます、つまり、

setUsers((user) => [{ name: "はると" }, { name: "あおい" }, { name: "ひまり" }]);

として処理されることになります。あたらしいユーザーに {name: "ひまり"} が追加されることになります。もっと知りたい方はスプレッド構文をどうぞ。

ただこれだと固定値しか追加されないので、名前をユーザーが入力できるようにします。

<input type="text" onInput={typedName} value={name} />

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

const typedName = (e) => {
  setName(() => e.target.value);
};

そして addUser 関数を修正します。

const addUser = () => {
  setUsers((user) => [...user, { name: name }]);
  setName(() => "");
};

setUsersによって追加ができたら input 要素の値を空にしておきたいので、setNameを使って空文字をセットしています。