No. 02Easy12 min

Lists & Keys: Rendering Arrays

Mission

Turn an array of data into UI with .map(), and remove items without mutating the state.

Tasks

1
Use .map() to return JSX for every task in the array.
2
Give each element a stable key taken from the task's id.
3
Add a delete button to every task.
4
Implement removeTask so it filters the array by id.
5
Update the state with the functional form (prev => ...).

Editor

import React, { useState } from 'react';

export default function TodoList() {
  // Tip: start with a few sample tasks
  const [tasks, setTasks] = useState([
    { id: 1, text: "Learn .map()" },
    { id: 2, text: "Understand keys" }
  ]);

  const removeTask = (id) => {
    // Tip: use .filter() and keep it immutable
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif', maxWidth: '500px' }}>
      <h1>My Todo List</h1>
      <div style={{ marginTop: '20px' }}>
        {/* Render your tasks here */}
        {/* Every task needs a delete button */}
      </div>
    </div>
  );
}

Requirements

0/6

Renders the tasks with .map() (not run yet)
Each item has a stable key taken from its id (not run yet)
Every task has a delete button with an onClick (not run yet)
Removes a task with .filter() (not run yet)
Uses the functional form: setTasks(prev => ...) (not run yet)
Does not mutate the array (no push, splice, pop...) (not run yet)

AI mentor

Reviews only the files you changed, plus the checks you missed.

Run the checks first. They are free and instant.