/
TodoList.js
33 lines (30 loc) · 894 Bytes
/
TodoList.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
const { TodoItem } = window.App;
class TodoList extends React.Component {
render() {
const {
todos,
onUpdateTodo,
onToggleTodo,
onDeleteTodo
} = this.props;
const todoElements = todos.map((todo) => (
<li key={todo.id}>
<TodoItem
title={todo.title}
completed={todo.completed}
onUpdate={(content) => onUpdateTodo && onUpdateTodo(todo.id, content)}
onToggle={(completed) => onToggleTodo && onToggleTodo(todo.id, completed)}
onDelete={() => onDeleteTodo && onDeleteTodo(todo.id)}
/>
</li>
));
return <ul>{todoElements}</ul>;
}
}
TodoList.propTypes = {
todos: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
onUpdateTodo: React.PropTypes.func,
onToggleTodo: React.PropTypes.func,
onDeleteTodo: React.PropTypes.func
};
window.App.TodoList = TodoList;