Skip to content

Exercises

Todo List Application

Let's suppose we're building a Todo app:

This app has 3 main pieces of functionality:

  1. Adding new todos
  2. Marking a todo as complete/incomplete
  3. Deleting a todo

Your mission is to refactor the code below so that none of the descendant components have more privilege than they need to accomplish these tasks.

Acceptance Criteria:

  • The CreateNewTodo component should only be able to modify the state in one specific way: to add a new todo to the list
  • The TodoList component should only be able to modify the state in two specific ways: toggling a todo between complete/incomplete, and deleting a todo.

Code Playground

import React from 'react';

import CreateNewTodo from './CreateNewTodo';
import TodoList from './TodoList';

function App() {
const [todos, setTodos] = React.useState([]);

return (
<div className="wrapper">
<div className="list-wrapper">
<TodoList todos={todos} setTodos={setTodos} />
</div>
<CreateNewTodo setTodos={setTodos} />
</div>
);
}

export default App;

Solution:

In this video, I share my solution, but also a pretty important takeaway near the end. There's another benefit to structuring things this way.

Before, our business logic was sprinkled throughout the application, mixed in with the JSX at the extremities of our application, within CreateNewTodo and TodoList.

Now, though, we've centralized this logic in three handy functions, grouped together:

function App() {
  const [todos, setTodos] = React.useState([]);


  function handleCreateTodo(value) {
    ...
  }


  function handleToggleTodo(id) {
    ...
  }


  function handleDeleteTodo(id) {
    ...
  }


  return (
    <div className="wrapper">
      ...
    </div>
  );
}

Imagine you're brand-new to this codebase. Which version do you think is easier for you to make sense of?