Как правильно изменить состояние компонента в React.js?

Question

[NikFedoseev]

Есть компонент. В этот компонент через пропсы передается новая заметка (объект с двумя полями "title", "text"). В созданной заметке на событие onClick вещается функция которая передает id через пропсы родительскому компоненту. У родительского компонента в состояниях хранится массив объектов, то есть заметок, id заметки равен номеру объекта в массиве. При попытке удалить какую нибудь заметку, пропадают все. А самая первая заметка которая под индексом 0 не удаляется. В чем может быть проблема? Неверное изменяю состояние?
При добавлении заметки, конкатенирую старый массив и новый. При удалении просто удаляю один объект из массива.

Answer 1

[Антон Спирин]

Вы уверены что понимаете как работает метод splice? Его вызов возвращает массив удаленных элементов, а не массив из которого эти элементы удалены.
Варианты решения:

handleNoteDel = index => {
  const notes = [...this.state.notes];
  notes.splice(index, 1);
  this.setState({ notes });
}

или:

handleNoteDel = index => {
  this.setState({
    notes: this.state.notes.filter((_, i) => i !== index),
  });
}

Comments

[NikFedoseev]

Спасибо, но проблемка.
Первый способ удаляет не сам элемент, а рядом стоящий или первый, второй способ не работает

[Антон Спирин]

NikFedoseev, значит вы в своем коде, что-то делаете неправильно.
Демо
Как видите, в демо оба способа удаляют элемент с индексом 3

[NikFedoseev]

Антон Спирин, Понял, буду разбираться, спасибо за помощь