問題一覧に戻る
初級状態管理
問題23: 配列のstate

配列stateを使ってリストアイテムを管理します。要素の追加と削除の操作を学びます。

import React, { useState } from 'react';

function TodoList() {
  // 配列stateを宣言
  const [items, setItems] = useState(["A", "B"]);

  // アイテムを追加
  const add = () => setItems([items, "C"]);

  // アイテムを削除
  const remove = (i) => setItems(items.((_, idx) => idx  i));

  return (
    <div>
      <button onClick={add}>追加</button>
      {/* 配列の各アイテムを表示 */}
      {items.map((item, i) => (
        <p key={i}>
          {item}
          <button onClick={() => remove(i)}>×</button>
        </p>
      ))}
    </div>
  );
}

export default TodoList;
···