Cách xóa phần tử mảng array delete (ok)

Cách 1

public deleteATask(id?:number): void {
  const tasks: ITask[] = this.state.tasks.filter(
    (task: ITask) => task.id !== id
  );
  this.setState({ tasks });
}

Toàn bộ code đây :)

import React from 'react';
import { ITask } from './Task';
import TaskForm from './TaskForm';
import TaskList from './TaskList';
interface IProps {
  title?: string;
}
interface IState {
  tasks: ITask[];
}
class App extends React.Component<IProps,IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      tasks: []
    };
    this.addANewTask = this.addANewTask.bind(this);
    this.deleteATask = this.deleteATask.bind(this);
  }
  public addANewTask(task: ITask): void {
    this.setState({
      tasks: [...this.state.tasks, task]
    });
  }
  public deleteATask(id?:number): void {
    const tasks: ITask[] = this.state.tasks.filter(
      (task: ITask) => task.id !== id
    );
    this.setState({ tasks });
  }
  render():JSX.Element {
    return (
      <div>
        <nav className="navbar navbar-light bg-light">
          <a className="navbar-brand" href="/">title</a>
        </nav>
        <div className="container">
          <div className="row">
            <div className="col-md-4">
              <TaskForm addANewTask={this.addANewTask} />
            </div>
            <div className="col-md-8">
              <TaskList tasks={this.state.tasks} deleteATask={this.deleteATask} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default App;

Cách 2:

case types.DELETE_TASK:
id = action.id;
index = findIndex(state, id);
state.splice(index, 1);
localStorage.setItem('tasks', JSON.stringify(state));
return [...state];
default:
return state;

Link: https://github.com/phamngoctuong/reacttodolist/blob/master/src/reducers/tasks.js

Cách 3: Dùng thư viện lodask