Why does the word change in all messages?

Question

React

Hey guys. Practicing React
So far I am making a table: https://codesandbox.io/s/yjqq555689
When I press Deletethe button, I get a message Row 0 deleted, when I press it Restore, it is displayed Row 0 restored, BUT the message is overwritten from above and I get it 2 restored, instead of what it would be 1 deletedand 1 restored
Why So?
Perhaps because of the binding to the productList state?

Answer 1

You take the deleted value from the elements of the productsList array - of course, there cannot be different values ​​at the same time. It is necessary that each element of history has its own deleted:

toggleRow(index) {
  this.setState(({ productsList, history }) => ({
    productsList: productsList.map((n, i) => i === index
      ? { ...n, deleted: !n.deleted }
      : n
    ),
    history: [
      ...history,
      {
        currentDateInfo: new Date().toLocaleDateString(),
        deleted: !productsList[index].deleted,
        index,
      },
    ],
  }));
}

<ul className="list-group">
  {this.state.history.map(n =>
    <li className="list-group-item">
      Row {n.index} {n.deleted ? 'deleted' : 'restored'} at {n.currentDateInfo}
    </li>
  )}
</ul>