-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
97 lines (75 loc) · 2.93 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React from "react";
import { render } from "react-dom";
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";
import { cloneDeep } from "lodash";
// TODO(#)s correspond to Code Next React Bootcamp's slides.
class App extends React.Component {
constructor(props) {
super(props);
// TODO(#3) Update the state such that reactDevName
// points to a string of your name.
this.state = {
reactDevName: "???",
todos: []
};
// In React class components, we bind each event handler to
// the instance. That way, when the event handler is called,
// the 'this' variable is pointing to this instance. If we
// skipped this step, then the 'this' variable would be
// undefined.
this.onTodoInputEnter = this.onTodoInputEnter.bind(this);
this.onTodoListItemToggle = this.onTodoListItemToggle.bind(this);
this.onTodoListItemRemove = this.onTodoListItemRemove.bind(this);
// React does not need to know about the next ID.
// We leave it outside of the state so that React
// does not try to re-render the component when it changes.
this.nextId = 0;
}
onTodoInputEnter(todoInputValue) {
// Deep copy the state.
const nextState = cloneDeep(this.state);
// TODO(#5) Create a todo object, which has 3 properties:
// id (number), text (string), and isComplete (boolean).
// hint: Use this.nextId and change it in some way.
// TODO(#6) Add the todo to the nextState.todos array.
// Set the next state.
this.setState(nextState);
}
onTodoListItemToggle(id) {
// TODO(#13) Deep copy the state.
// TODO(#14) Find the todo that matches the id.
// If there is no matched todo, do nothing.
// hint: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
// TODO(#15) Update the matched todo's isComplete property
// to be the opposite of what it is currently set.
// TODO(#16) Set the next state.
}
onTodoListItemRemove(id) {
// TODO(#21) Deep copy the state.
// TODO(#22) Use Array.prototype.filter to create a new
// this.state.todos array that does *not* have a todo
// that matches given id.
// hint: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
// TODO(#23) Set the next state.
}
render() {
return (
<div className="container">
<h1>{this.state.reactDevName}'s Todos</h1>
<TodoInput onEnter={/* TODO(#7) Use this.onTodoInputEnter */} />
<br />
<TodoList
todos={this.state.todos}
onTodoListItemToggle={/* TODO(#17) Use this.onTodoListItemToggle */}
onTodoListItemRemove={/* TODO(#24) Use the correct event handler. */}
/>
<br />
<pre className="alert alert-warning">
this.state = {JSON.stringify(this.state, null, 2)}
</pre>
</div>
);
}
}
render(<App />, document.getElementById("root"));