問題一覧に戻る
初級JSX基礎
問題6: リストのレンダリング

Reactでmap()メソッドを使用してリストをレンダリングする方法を学びます。リストを作成する際は、各要素に一意のkey属性を設定してReactが効率的にUIを更新できるようにする必要があります。

function TodoList() {
  const todos = ['買い物に行く', 'コードを書く', '勉強する'];
  
  // mapメソッドを使って各todoアイテムをレンダリング
  return (
    <ul>
      {/* リストアイテムを繰り返し表示 */}
      {todos.((, index) => (
        <li ={index}>{}</li>
      ))}
    </ul>
  );
}

export default TodoList;
···