forked from lighthouse-labs/React-Week-Components-Exercises
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexercise-2.html
75 lines (71 loc) · 2.13 KB
/
exercise-2.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<link href="./style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h1>Get It Done! <br/><small>For the truly industrious</small></h1>
<div id="root">
<table>
<thead>
<tr><td>Task</td><td>Done?</td></tr>
</thead>
<tbody>
<tr>
<td>Walk Dog</td><td><input type='checkbox' checked/></td>
</tr>
<tr>
<td>Buy Bread</td><td><input type='checkbox'/></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/babel">
const root = document.getElementById('root');
const tasks = [{taskName: 'Walk Dog', finished: true}, {taskName: 'Buy Bread', finished: false}];
// TYPE ANSWER HERE
class TodoListItem extends React.Component {
render(){
if(this.props.finished) {
return (
<tr>
<td>{this.props.taskName}</td><td><input type='checkbox' defaultChecked/></td>
</tr>)
} else {
return (
<tr>
<td>{this.props.taskName}</td><td><input type='checkbox'/></td>
</tr>)
}
}
}
class TodoList extends React.Component {
render() {
const toDoListItems = tasks.map((task) => {
return <TodoListItem taskName={task.taskName} finished={task.finished} />
})
return (
<div>
<table>
<thead>
<tr><td>Task</td><td>Done?</td></tr>
</thead>
<tbody>
{toDoListItems}
</tbody>
</table>
</div>
)
}
}
ReactDOM.render((<TodoList />), root)
</script>
</body>
</html>