Как восстановить удаленные данные c таблицы?

Question

[Insolation]

Есть массив продуктов и с этого массива я рендерю таблицу продуктов.
У каждой ячейки, есть кнопка delete и restore.
По клику на delete, данные "затираются" и вместо delete, становится кнопка Restore Data. По клику на нее данные возвращаются и становятся в том же порядке, как и было.

Как я думал сделать:
По клику на deleteделать поля Name и Id visibility: none и в стейте сделать переменную isDeleted: true, если true то рендерить кнопку Restor'а, по клику на нее полям возвращать visibility.

Вот что есть на данный момент:
https://codesandbox.io/s/j1l0y4rmw9

Answer 1

[0xD34F]

Как я думал сделать:
По клику на deleteделать поля Name и Id visibility: none и в стейте сделать переменную isDeleted: true, если true то рендерить кнопку Restor'а, по клику на нее полям возвращать visibility.

Окей, делаем:

const ProductItem = ({ product, toggleRow }) => (
  <tr>
    <th>{product.deleted || product.id}</th>
    <td>{product.deleted || product.name}</td>
    <td>
      <button onClick={toggleRow}>
        {product.deleted ? 'Restore' : 'Delete'}
      </button>
    </td>
  </tr>
);

class Products extends React.Component {
  state = {
    products: [ 'Apple', 'Peanut', 'Tomato', 'Cucumber', 'Banana', 'Lemon' ].map((n, i) => ({
      id: i + 1,
      name: n,
      deleted: false,
    })),
  }

  toggleRow(product) {
    this.setState(({ products }) => ({
      products: products.map(n => n === product
        ? { ...n, deleted: !n.deleted }
        : n
      ),
    }));
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Product Name</th>
            <th>Delete / Restore</th>
          </tr>
        </thead>
        <tbody>
          {this.state.products.map(n => (
            <ProductItem
              key={n.id}
              product={n}
              toggleRow={() => this.toggleRow(n)}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

Правда непонятно, при чём тут удаление? - данные-то на месте остаются, просто не отображаются.

Comments

[Insolation]

Воу, спасибо.

Правда непонятно, при чём тут удаление? - данные-то на месте остаются, просто не отображаются.

Фишка в том, что-бы сделать вот этот restore. Потом я добавлю какую-то кнопку Save Changes, и уже буду по клику на нее удалять элемент с массива.