Dynamic UI

Let’s build a dynamic Todo list!

function TodoApp() {
  const [todos, setTodos] = React.useState(["Learn React"]);

  function addTodo() {
    // We create a NEW array containing all old todos, plus the new one.
    // NEVER mutate the existing array!
    setTodos([...todos, "New Task"]);
  }

  return (
    <div>
      <button onClick={addTodo}>Add Task</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

(Note: We used the index as a key here for simplicity, but a unique ID is better!)