benkissi

const DisplayTodos = props => {
  return (
    <AppConsumer>
      {({ todos, completed }) => {
        const notCompleted = todos.filter(todo => {
          if (todo.completed === false) {
            return todo;
          }
        });

benkissi

const TodoInput = props => {
  let todo;
  return (
    <AppConsumer>
      {({ addTodo }) => (
        <form
          onSubmit={e => {
            e.preventDefault();
          }}
        >

benkissi

class TodoApp extends Component {
  render() {
    return (
      <div className="todos">
        <Grid columns={1} className="ui center aligned">
          <Grid.Row>
            <Grid.Column className="todo-body" width={12}>
              <h2>Simple Todo</h2>
              <TodoInput />
              <div id="display-todos">

benkissi

import React, { Component } from "react";
import { AppConsumer } from "./app-context";
import { Grid, Button, Input } from "semantic-ui-react";

const TodoInput = props => {
  let todo;
  return (
    <AppConsumer>
      {({ addTodo }) => (
        <form

benkissi

const rootElement = document.getElementById("root");
ReactDOM.render(
  <AppProvider>
    <TodoApp />
  </AppProvider>,
  rootElement
);

benkissi

const AppConsumer = AppContext.Consumer;
export { AppProvider, AppConsumer };

benkissi

render() {
  return (
    <AppContext.Provider
      value={{
        todos: this.state.todos,
        addTodo: this.addTodo,
        completed: this.completed
      }}
    >
    {this.props.children}

benkissi

completed(id) {
  const { todos } = this.state;
  todos.forEach(todo => {
    if (todo.id === id) {
      todo.completed = !todo.completed;
    }
  });
  this.setState({
    todos: todos
  });

benkissi

addTodo(todo) {
  const { todos } = this.state;
  const newTodo = {
    id: Math.floor(Math.random() * (1000 - 1)) + 1,
    todo: todo,
    createdAt: Date.now(),
    completed: false
   };
  this.setState({
    todos: todos.concat(newTodo)

benkissi

import React, { Component } from "react";
const AppContext = React.createContext();
class AppProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: []
    };
    this.addTodo = this.addTodo.bind(this);
    this.completed = this.completed.bind(this);