App.js

import React, { Component } from 'react';
import './App.css';
import ToDo from './components/ToDo.js';


class App extends Component {
constructor(props) { //Initial properties to be default renderd
    super(props);
      this.state = {
        todos: [
          { description: 'Walk the cat ', isCompleted: true, deleteThis: false },
          { description: 'Throw the dishes away ', isCompleted: false, deleteThis: false },
          { description: 'Buy new dishes ', isCompleted: false, deleteThis: false }
        ],
        newTodoDescription: ''
      };
    } //End constructor

   handleChange(e) {
     this.setState({ newTodoDescription: e.target.value })
   }

   handleSubmit(e) {
     e.preventDefault();
     if (!this.state.newTodoDescription) { return }
     console.log('handleSubmit called');
     const newTodo = { description: this.state.newTodoDescription, isCompleted: false };
     this.setState({ todos: [...this.state.todos, newTodo], newTodoDescription: '' });
   }

    toggleComplete(index) {
     const todos = this.state.todos.slice();
     const todo = todos[index];
     todo.isCompleted = todo.isCompleted ? false : true;
     this.setState({ todos: todos });

     //Below for testing only
     //'todo' is the selected object in the todos array
     if (todo.isCompleted === true){
       //console.log(todo); returns '{description: "selected", isCompleted: true}'
       console.log('toggleComplete executed. You checked ' + index + ' index.' );
       console.log( todos);
       console.log( todo);
     } else {
       console.log('toggleComplete executed. You unchecked ' + index + ' index.' );
       console.log( todos);
       console.log( todo);
     }
}

deleteToDo(){
  //console.log('test');
  const removeTodo = {description: this.state.todos, deleteThis: true };
  if(removeTodo === true){
    this.todos.filter();
  }
}

render() {
    return (
      <div className="App">

        <ul>
          { this.state.todos.map( (todo, index) =>
            <ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () => this.toggleComplete(index) } />
          )}
        </ul>



        <form onSubmit={ (e) => this.handleSubmit(e) }>
           <input type="text" value={ this.state.newTodoDescription } onChange={ (e) => this.handleChange(e) } />
           <input type="submit" />
         </form>
      </div>
    );
  }
}


export default App;