Refactor setState in TodoApp

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
  });
  };
 }

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!

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
  });
  };
 }

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
  });
  };
 }

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
  });
  };
 }