forked from cerebralideas/react-redux-workshop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
presentational.tsx
35 lines (32 loc) · 867 Bytes
/
presentational.tsx
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
import * as React from 'react';
let TodoForm = function TodoForm(props) {
return (
<form onSubmit={ props.addTodo }>
<label htmlFor="todo">Add Todo:</label>
<input id="todo" name="todo" type="text" />
<input type="submit" value="Submit" />
</form>
);
};
let TodoItem = function TodoItem(props) {
let isCompleted = props.todo.completed ? 'completed' : '';
return (
<li key={ props.key }>
<label>
<input id={ props.todo.id } name="completed" type="checkbox"
onChange={ props.completeTodo } />
<span className={ isCompleted }>{ props.todo.title }</span>
</label>
</li>
);
};
let TodoList = function TodoList(props) {
return (
<ul>
{props.todos.map(function (todo, i) {
return <TodoItem todo={ todo } completeTodo={ props.completeTodo } key={ i } />;
})}
</ul>
);
};
export { TodoForm, TodoItem, TodoList };