Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const DisplayTodos = props => {
- return (
- <AppConsumer>
- {({ todos, completed }) => {
- const notCompleted = todos.filter(todo => {
- if (todo.completed === false) {
- return todo;
- }
- });
- return (
- <div>
- <p>All your todos: {notCompleted.length}</p>
- <ol>
- {todos.length > 0
- ? todos.map(todo => (
- <li
- className={
- todo.completed
- ? "completed todo align-left"
- : "todo align-left"
- }
- key={todo.id}
- onClick={() => completed(todo.id)}
- >
- {todo.todo}
- {" "}
- <span className={todo.completed ? "date" : "date"}>
- {new Date(todo.createdAt).toString()}
- </span>
- </li>
- ))
- : ""}
- </ol>
- </div>
- );
- }}
- </AppConsumer>
- );
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement