Восстановление элементов React

Question

У меня есть работающий код, который удаляет каждый отдельный элемент. Как мне с помощью функции onRevert восстановить все элементы? И почему мне это надо делать через массив, а не сразу заносить в html? Спасибо большое и добра вам)

import logo from './logo.svg';
import React, {useState, useRef} from 'react';
import './App.css';
import {keys} from "@material-ui/core/styles/createBreakpoints";

function App() {

let [arrayTask3, myArrayTask3] = useState([{
        id: 1,
        title: 'Task2 title 1'
 },
 {
        id: 2,
        title: 'Task2 title 2'
 },
 {
        id: 3,
        title: 'Task2 title 3'
 },
])

let deleteElements = (id) => {
    let myArray = [...arrayTask3];
    let arrayFilter = myArray.filter(el => el.id !== id);
    myArrayTask3(arrayFilter)
}

let onRevert = () => {

}

return (
    <div>
        <div>
            <ul>{arrayTask3.map(el =>
                <li>{el.title}
                <button onClick={() => deleteElements(el.id)}>Delete elements</button>
                </li>
             )}</ul>
             <button onClick={onRevert}>Restore</button>
        </div>
     </div>
    );
}

export default App;

Answer 1

Чтобы знать, что удалять - надо сначала сохранить это где-то. При удалении таска сохраняем его в отдельный массив (там будут храниться только удаленные таски). Потом при вызове функции revert() в массив со всеми тасками добавляем те, которые в удалённых.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [deletedTasks, setDeletedTasks] = useState([]);
  let [tasks, setTasks] = useState([
    {
      id: 1,
      title: "Task2 title 1"
    },
    {
      id: 2,
      title: "Task2 title 2"
    },
    {
      id: 3,
      title: "Task2 title 3"
    }
  ]);

  function deleteElements(id) {
    const task = tasks.find((e) => e.id === id);
    setDeletedTasks((p) => [...p, task]);
    setTasks((p) => p.filter((e) => e.id !== id));
  }

  function revert() {
    setTasks((p) => [...p, ...deletedTasks]);
    setDeletedTasks([]);
  }

  return (
    <div className="App">
      <div>
        <ul>
          {tasks.map((el) => (
            <li key={el.id}>
              {el.title}
              <button onClick={() => deleteElements(el.id)}>
                Delete elements
              </button>
            </li>
          ))}
        </ul>
        <button onClick={() => revert()}>Restore</button>
      </div>
    </div>
  );
}

БЛОГ НА HUSL

Восстановление элементов React

Ответы (1 шт):