ReactJS Todo (Fluido session) WIP

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const todoData = [
  {
    description: "Learn React",
    done: true
  },
  {
    description: "Grab a drink",
    done: false
  },
  {
    description: "Chill out",
    done: false
  }
];

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      todos: todoData
    };
  }

  completeTodoAction = (index, e) => {
    const newTodos = [...this.state.todos];
    newTodos[index].done = true;
    this.setState({ todos: newTodos });
  };

  deleteTodoAction = index => {
    const newTodos = [...this.state.todos];
    newTodos.splice(index, 1);
    this.setState({ todos: newTodos });
  };

  completeAll = () => {
    const newTodos = [...this.state.todos];
    newTodos.map(todo => {
      return (todo.done = true);
    });
    this.setState({ todos: newTodos });
  };

  addTodoAction = (text = "test") => {
    const newTodos = [...this.state.todos, { description: text, done: false }];
    this.setState({ todos: newTodos });
  };

  render() {
    return (
      <div className="App">
        <TodoList
          todos={this.state.todos}
          completeTodoAction={this.completeTodoAction}
          deleteTodoAction={this.deleteTodoAction}
        />
        <NewTodo addTodoAction={this.addTodoAction} />
      </div>
    );
  }
}

const Todo = props => {
  let textDecoration = "";

  if (props.data.done === true) {
    textDecoration = "line-through";
  }

  return (
    <div className="Todo">
      <p
        style={{
          textDecoration: textDecoration // props.data.done ? "line-through" : "";
        }}
        className="myClass"
      >
        {props.data.description}
      </p>
      <CompleteButton onClickHandler={props.onComplete} />
      <DeleteButton onDeleteHandler={props.onDelete} />
    </div>
  );
};

class TodoList extends React.Component {
  render() {
    return (
      <div>
        {this.props.todos.map((todo, index) => (
          <Todo
            data={todo}
            key={index}
            onComplete={e => this.props.completeTodoAction(index)}
            onDelete={e => this.props.deleteTodoAction(index)}
          />
        ))}
        {/** 
          <button onClick={this.completeAll}>complete all</button>
        **/}
      </div>
    );
  }
}

const CompleteButton = ({ onClickHandler }) => (
  <button onClick={onClickHandler}>Complete</button>
);
const DeleteButton = ({ onDeleteHandler }) => (
  <button onClick={onDeleteHandler}>X</button>
);

class NewTodo extends React.Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }

  onChangeHandler = event => {
    this.setState({ value: event.target.value });
  };

  onSubmitHandler = event => {
    event.preventDefault();
    const text = event.target[0].value;
    this.props.addTodoAction(text);
    this.setState({ value: "" });
  };

  render() {
    return (
      <form className="NewTodo" onSubmit={this.onSubmitHandler}>
        <input
          type="text"
          className="NewTodoInput"
          onChange={this.onChangeHandler}
          placeholder="new todo..."
          value={this.state.value}
        />
      </form>
    );
  }
}

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