@@ -12,43 +12,40 @@ class App extends Component {
12
12
this . state = new State ( )
13
13
}
14
14
15
- render ( ) {
15
+ render ( ) {
16
16
const { create, changeFilter, clearCompleted, toggleAll, state } = this
17
17
const { todos, hasTodos, completed, hasCompleted, allCompleted, active, filter } = state
18
18
19
- const todosClass = classNames ( { selected : filter === 'todos' } )
20
- const completedClass = classNames ( { selected : filter === 'completed' } )
21
- const activeClass = classNames ( { selected : filter === 'active' } )
19
+ const todosClass = classNames ( { selected : filter === 'todos' } )
20
+ const completedClass = classNames ( { selected : filter === 'completed' } )
21
+ const activeClass = classNames ( { selected : filter === 'active' } )
22
22
23
23
return (
24
24
< div className = "todoapp" >
25
25
< header className = "header" >
26
- < h1 > todos</ h1 >
27
- < input onKeyDown = { create } className = "new-todo"
28
- placeholder = "What needs to be done?" autoFocus = { true } />
29
- </ header >
26
+ < h1 > todos</ h1 >
27
+ < input onKeyDown = { create } className = "new-todo" placeholder = "What needs to be done?" autoFocus = { true } />
28
+ </ header >
30
29
31
- { hasTodos && < section className = "main" >
32
- < input className = "toggle-all" type = "checkbox"
33
- checked = { allCompleted } onChange = { toggleAll } />
34
- < label htmlFor = "toggle-all" > Mark all as complete</ label >
35
- < ul className = "todo-list" >
36
- { state [ filter ] . map ( todo =>
37
- < TodoItem key = { todo . title } todo = { todo } todos = { todos } /> ) }
38
- </ ul >
39
- </ section > }
30
+ { hasTodos && < section className = "main" >
31
+ < input className = "toggle-all" type = "checkbox" checked = { allCompleted } onChange = { toggleAll } />
32
+ < label htmlFor = "toggle-all" > Mark all as complete</ label >
33
+ < ul className = "todo-list" >
34
+ { state [ filter ] . map ( todo => < TodoItem key = { todo . title } todo = { todo } todos = { todos } /> ) }
35
+ </ ul >
36
+ </ section > }
40
37
41
38
{ hasTodos && < footer className = "footer" >
42
- < span className = "todo-count" > { active . length } items left</ span >
43
- < div className = "filters" >
44
- < button className = { todosClass } value = "todos" onClick = { changeFilter } > All</ button >
45
- < button className = { activeClass } value = "active" onClick = { changeFilter } > Active</ button >
46
- < button className = { completedClass } value = "completed" onClick = { changeFilter } > Completed</ button >
47
- </ div >
48
- { hasCompleted && < button className = "clear-completed" onClick = { clearCompleted } >
49
- Clear completed
50
- </ button > }
51
- </ footer > }
39
+ < span className = "todo-count" > { active . length } items left</ span >
40
+ < div className = "filters" >
41
+ < button className = { todosClass } value = "todos" onClick = { changeFilter } > All</ button >
42
+ < button className = { activeClass } value = "active" onClick = { changeFilter } > Active</ button >
43
+ < button className = { completedClass } value = "completed" onClick = { changeFilter } > Completed</ button >
44
+ </ div >
45
+ { hasCompleted && < button className = "clear-completed" onClick = { clearCompleted } >
46
+ Clear completed
47
+ </ button > }
48
+ </ footer > }
52
49
</ div >
53
50
)
54
51
}
@@ -75,4 +72,4 @@ class App extends Component {
75
72
}
76
73
}
77
74
78
- ReactDOM . render ( < App /> , document . getElementById ( 'react-root' ) )
75
+ ReactDOM . render ( < App /> , document . getElementById ( 'react-root' ) )
0 commit comments