diff --git a/step1-07/demo/src/TodoApp.tsx b/step1-07/demo/src/TodoApp.tsx
index 889cf500..ae69673a 100644
--- a/step1-07/demo/src/TodoApp.tsx
+++ b/step1-07/demo/src/TodoApp.tsx
@@ -49,42 +49,45 @@ export class TodoApp extends React.Component<any, TodoAppState> {
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
+    this.setState(({ todos }) => ({
       todos: { ...todos, [id]: { label, completed: false } }
-    });
+    }));
   };
 
   private _complete = id => {
-    const { todos } = this.state;
-    const todo = todos[id];
-    const newTodos = { ...todos, [id]: { ...todo, completed: !todo.completed } };
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
+    this.setState(({ todos }) => {
+      const newTodos = {};
 
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step1-07/exercise/README.md b/step1-07/exercise/README.md
index 2d8922db..250ae665 100644
--- a/step1-07/exercise/README.md
+++ b/step1-07/exercise/README.md
@@ -4,12 +4,12 @@ If you don't already have the app running, start it by running `npm start` from
 
 ## TodoFooter
 
-1. Open TodoFooter and write a `TodoFooterProps` interface. It should include two values, a `clear` and `todos`. Use this interface in the function props like this: `(props: TodoFooterProps)`
+1. Open TodoFooter and write a `TodoFooterProps` interface. It should include two values, a `clear` and `todos`. Use this interface in the function props like this: `(props: TodoFooterProps)`.
 
 2. Write an `_onClick` function that calls `props.clear`.
 
-  - Since TodoFooter is not a class, the `_onClick` function needs to be stored in a const placed before the `return`.
-  - Remember to use an arrow function to define this click handler.
+- Since TodoFooter is not a class, the `_onClick` function needs to be stored in a const placed before the `return`.
+- Remember to use an arrow function to define this click handler.
 
 3. Assign `_onClick` to the button's `onClick` prop. You won't need to use `this` since the component isn't a class.
 
@@ -19,13 +19,12 @@ If you don't already have the app running, start it by running `npm start` from
 
 1. Open TodoHeader and write `TodoHeaderProps` which will include `addTodo`, `setFilter` and `filter`. Replace the first `any` in the class declaration with this interface.
 
-2. This component also has state. Write `TodoHeaderState` (there's just one value), and add this where the second `any` was.
+2. This component also has state. Write a `TodoHeaderState` interface (there's just one value), and use it to replace the second `any`.
 
-3. Add `_onFilter` to each of the filter buttons
+3. Assign `_onFilter` as the `onClick` event handler for each of the filter buttons.
 
-  - Note that we can't add new parameters to onClick, but we can pull information from the event target!
-  - Remember to use an arrow function for this one too
+- Note that we can't add new parameters to onClick, but we can pull information from the event target!
 
-4. Call `_onAdd` from the submit button
+4. Assign `_onAdd` as the `onClick` event handler for the submit button.
 
 5. Check out this new functionality! We can now add and filter todos!
diff --git a/step1-07/exercise/src/TodoApp.tsx b/step1-07/exercise/src/TodoApp.tsx
index 0e575cf2..c568b60d 100644
--- a/step1-07/exercise/src/TodoApp.tsx
+++ b/step1-07/exercise/src/TodoApp.tsx
@@ -46,42 +46,45 @@ export class TodoApp extends React.Component<any, { todos: Todos; filter: Filter
   // business logic
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
+    this.setState(({ todos }) => ({
       todos: { ...todos, [id]: { label, completed: false } }
-    });
+    }));
   };
 
   private _complete = id => {
-    const { todos } = this.state;
-    const todo = todos[id];
-    const newTodos = { ...todos, [id]: { ...todo, completed: !todo.completed } };
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
+    this.setState(({ todos }) => {
+      const newTodos = {};
 
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step1-07/final/src/TodoApp.tsx b/step1-07/final/src/TodoApp.tsx
index 1ec9fc8a..76cf6708 100644
--- a/step1-07/final/src/TodoApp.tsx
+++ b/step1-07/final/src/TodoApp.tsx
@@ -27,42 +27,45 @@ export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterT
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
+    this.setState(({ todos }) => ({
       todos: { ...todos, [id]: { label, completed: false } }
-    });
+    }));
   };
 
   private _complete = id => {
-    const { todos } = this.state;
-    const todo = todos[id];
-    const newTodos = { ...todos, [id]: { ...todo, completed: !todo.completed } };
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
+    this.setState(({ todos }) => {
+      const newTodos = {};
 
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step2-02/demo/src/components/TodoApp.tsx b/step2-02/demo/src/components/TodoApp.tsx
index 5276fd83..2961a7af 100644
--- a/step2-02/demo/src/components/TodoApp.tsx
+++ b/step2-02/demo/src/components/TodoApp.tsx
@@ -33,59 +33,69 @@ export class TodoApp extends React.Component<any, Store> {
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
-      todos: { ...todos, [id]: { label } }
-    });
+    this.setState(({ todos }) => ({
+      todos: { ...todos, [id]: { label, completed: false } }
+    }));
   };
 
   private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
+    this.setState(({ todos }) => {
+      const newTodos = { ...todos };
+      delete newTodos[id];
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _complete = id => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id].completed = !newTodos[id].completed;
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], label }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
+    this.setState(({ todos }) => {
+      const newTodos = {};
 
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step2-02/exercise/src/components/TodoApp.tsx b/step2-02/exercise/src/components/TodoApp.tsx
index 1ace4c75..eee38ecc 100644
--- a/step2-02/exercise/src/components/TodoApp.tsx
+++ b/step2-02/exercise/src/components/TodoApp.tsx
@@ -32,59 +32,69 @@ export class TodoApp extends React.Component<any, Store> {
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
-      todos: { ...todos, [id]: { label } }
-    });
+    this.setState(({ todos }) => ({
+      todos: { ...todos, [id]: { label, completed: false } }
+    }));
   };
 
   private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
+    this.setState(({ todos }) => {
+      const newTodos = { ...todos };
+      delete newTodos[id];
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _complete = id => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id].completed = !newTodos[id].completed;
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], label }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
+    this.setState(({ todos }) => {
+      const newTodos = {};
 
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step2-03/demo/src/components/TodoApp.tsx b/step2-03/demo/src/components/TodoApp.tsx
index 914fb030..3deb478a 100644
--- a/step2-03/demo/src/components/TodoApp.tsx
+++ b/step2-03/demo/src/components/TodoApp.tsx
@@ -67,59 +67,69 @@ export class TodoApp extends React.Component<any, Store> {
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
-      todos: { ...todos, [id]: { label } }
-    });
+    this.setState(({ todos }) => ({
+      todos: { ...todos, [id]: { label, completed: false } }
+    }));
   };
 
   private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
+    this.setState(({ todos }) => {
+      const newTodos = { ...todos };
+      delete newTodos[id];
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _complete = id => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id].completed = !newTodos[id].completed;
-
-    this.setState({
-      todos: newTodos
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
+
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
-
-    this.setState({
-      todos: newTodos
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], label }
+      };
+
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
-
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
-
-    this.setState({
-      todos: newTodos
+    this.setState(({ todos }) => {
+      const newTodos = {};
+
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
+
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step2-03/exercise/src/components/TodoApp.tsx b/step2-03/exercise/src/components/TodoApp.tsx
index 4d52c647..def84cc9 100644
--- a/step2-03/exercise/src/components/TodoApp.tsx
+++ b/step2-03/exercise/src/components/TodoApp.tsx
@@ -40,59 +40,69 @@ export class TodoApp extends React.Component<any, Store> {
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
-      todos: { ...todos, [id]: { label } }
-    });
+    this.setState(({ todos }) => ({
+      todos: { ...todos, [id]: { label, completed: false } }
+    }));
   };
 
   private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
+    this.setState(({ todos }) => {
+      const newTodos = { ...todos };
+      delete newTodos[id];
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _complete = id => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id].completed = !newTodos[id].completed;
-
-    this.setState({
-      todos: newTodos
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
+
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
-
-    this.setState({
-      todos: newTodos
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], label }
+      };
+
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
-
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
-
-    this.setState({
-      todos: newTodos
+    this.setState(({ todos }) => {
+      const newTodos = {};
+
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
+
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step2-04/demo/src/components/TodoApp.tsx b/step2-04/demo/src/components/TodoApp.tsx
index 971b5273..56d6ab6f 100644
--- a/step2-04/demo/src/components/TodoApp.tsx
+++ b/step2-04/demo/src/components/TodoApp.tsx
@@ -41,59 +41,69 @@ export class TodoApp extends React.Component<any, Store> {
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
-      todos: { ...todos, [id]: { label } }
-    });
+    this.setState(({ todos }) => ({
+      todos: { ...todos, [id]: { label, completed: false } }
+    }));
   };
 
   private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
+    this.setState(({ todos }) => {
+      const newTodos = { ...todos };
+      delete newTodos[id];
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _complete = id => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id].completed = !newTodos[id].completed;
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], label }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
+    this.setState(({ todos }) => {
+      const newTodos = {};
 
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }
diff --git a/step2-04/exercise/src/components/TodoApp.tsx b/step2-04/exercise/src/components/TodoApp.tsx
index ba9fc1a3..7eb55f17 100644
--- a/step2-04/exercise/src/components/TodoApp.tsx
+++ b/step2-04/exercise/src/components/TodoApp.tsx
@@ -42,59 +42,69 @@ export class TodoApp extends React.Component<any, Store> {
   }
 
   private _addTodo = label => {
-    const { todos } = this.state;
     const id = index++;
 
-    this.setState({
-      todos: { ...todos, [id]: { label } }
-    });
+    this.setState(({ todos }) => ({
+      todos: { ...todos, [id]: { label, completed: false } }
+    }));
   };
 
   private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
+    this.setState(({ todos }) => {
+      const newTodos = { ...todos };
+      delete newTodos[id];
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _complete = id => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id].completed = !newTodos[id].completed;
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], completed: !todos[id].completed }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
+    this.setState(({ todos }) => {
+      const newTodos = {
+        ...todos,
+        [id]: { ...todos[id], label }
+      };
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
+    this.setState(({ todos }) => {
+      const newTodos = {};
 
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
+      Object.keys(this.state.todos).forEach(id => {
+        if (!todos[id].completed) {
+          newTodos[id] = todos[id];
+        }
+      });
 
-    this.setState({
-      todos: newTodos
+      return {
+        todos: newTodos
+      };
     });
   };
 
   private _setFilter = filter => {
     this.setState({
-      filter: filter
+      filter
     });
   };
 }