How to recover deleted data from a table?

Question

JavaScript

Hello. Please help me with an implementation idea.
I have an array of products and from this array I render a table of products.
Each cell has a delete and restore button.
By clicking on delete, the data is "overwritten" and instead of delete, the Restore Data button becomes. By clicking on it, the data returns and becomes in the same order as it was.
How I thought to do it:
By clicking on deletemake the Name and Id fields and make a variable in the state , if true then render the Restor button, by clicking on it return the fields /j1l0y4rmw9visibility: noneisDeleted: truevisibility

Answer 1

How I thought to do it:
By clicking on deletemake the Name and Id fields and in the state make a variable , if true then render the Restor button, by clicking on it return the fieldsvisibility: noneisDeleted: truevisibility

Draw something like this:

const ProductItem = ({ product, toggleRow }) => {
  return (
    <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(index) {
    this.setState(({ products }) => ({
      products: products.map((n, i) => i === index
        ? { ...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, i) => (
            <ProductItem
              key={n.id}
              product={n}
              toggleRow={() => this.toggleRow(i)}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

True, it is not clear what the removal has to do with it? - the data remains in place, it's just not displayed.