Почему меняется слово во всех сообщениях?

Question

[Insolation]

Привет ребят. Практикую React
Вот пока делаю таблицу: https://codesandbox.io/s/yjqq555689

Когда нажимаю кнопку Deleteу меня выводится сообщение Row 0 deleted, когда нажимаю Restore, то выводится Row 0 restored, НО затирается сообщение сверху и у меня получается 2 restored, вместо того, что-бы было 1 deleted и 1 restored

Почему так?
Возможно из-за привязки к стейту productList?

Answer 1

[0xD34F]

Вы берёте значение deleted из элементов массива productsList - естественно, одновременно разных значений быть не может. Надо, чтобы у каждого элемента history был свой 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>

Comments

[Insolation]

Блин, вроде легко и на таком затуп((
Спасибо вам)