Todolist react

index.js

import React, { Component } from "react";

class App extends Component {
  state = {
    currentTodo: "",
    todos: []
  };

  addTodo = () => {
    this.setState(prev => {
      return {
        todos: prev.todos.concat({ title: prev.currentTodo, isDone: false }),
        currentTodo: ""
      };
    });
  };

  deleteTodo = i => {
    this.setState(prev => {
      return {
        todos: prev.todos.filter((_, t) => t !== i)
      };
    });
  };

  updateTodo = i => {
    this.setState(prev => {
      return {
        todos: prev.todos.map((t, index) =>
          index !== i ? t : { ...t, isDone: !t.isDone }
        )
      };
    });
  };

  render() {
    return (
      <div>
        <div>
          <input
            value={this.state.currentTodo}
            onChange={v => {
              this.setState({ currentTodo: v.target.value });
            }}
          />
          <button onClick={this.addTodo}>Add</button>
        </div>
        <div>
          {this.state.todos.map((t, i) => {
            return (
              <React.Fragment key={i}>
                <div
                  style={{
                    cursor: "pointer",
                    display: "flex",
                    flexDirection: "row"
                  }}
                >
                  <div
                    onClick={() => this.updateTodo(i)}
                    style={{ textDecoration: t.isDone ? "line-through" : null }}
                  >
                    {t.title}
                  </div>
                  <button onClick={() => this.deleteTodo(i)}>X</button>
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </div>
    );
  }
}

export default App;