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: false, 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(); //copy array
     const todo = todos[index]; //single todo
     todo.isCompleted = todo.isCompleted ? false : true; //toggle value
     todo.deleteThis = todo.deleteThis ? false : true;
     this.setState({ todos: todos });  // this.setState({previous : new})
     //Below for testing only
     //'todo' is the selected object in the todos array
     console.log(index);
     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(index){ // this is looped becuase of .map on line 70
    const delTodos = this.state.todos.slice(); // coppy array
    console.log(delTodos[index]); // select 1 index of array based on wich delete button is clicked
    console.log('the above is index ' + index); // visualize index number selected
    const newArr = delTodos.filter( () => delTodos[index] === index);
    this.setState({ todos: newArr});

     //const removeTodos = this.state.todos.filter( () => this.state.todos[index] === index); //this.state.todos[index]    != index
     //this.setState({ todos: removeTodos });
    }



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

        <ul>
          { this.state.todos.map( (todo, index) => //for loop
            <
            ToDo key={ index }
            description={ todo.description }
            isCompleted={ todo.isCompleted }
            deleteToDo={ () => this.deleteToDo(index) }
            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;