Как правильно удалить объект в массиве при обновлении состояния компонента?

Question

[Faraday_22]

например имеем массив объектов вида

let users= [
    {
        "id": 0,
        "user": "qwe",
    },
    {
        "id": 1,
        "user": "qwe1",
    },
    {
        "id": 2,
        "user": "qwe2",
    }
 ]

в компоненте выводим элементы

let user = this.props.users.map(function(user){
      return <li key={user.id}><User number={user.id} text={user.id}/></li>
 })

У нас вывелся список компонентов user и в каждом есть кнопка для удаления. Как правильно реализовать удаление одного элемента?

Например как удалить элемент

{
    "id": 0,
    "user": "qwe",
}

что бы при обновлении состояния выводились оставшиеся 2

Answer 1

[Максим]

Массив хранить в state.
При клике на кнопку "крестик" - вызывать обработчик, например onDeleteClick (который является методом вашего класса)

state = {
  users: [/*.. массив с юзерами*/]
}
...
onDeleteClick = (e) => {
  const id = e.currentTarget.dataset.myId
  const новый_массив =  массив_без_удаленного_элемента (подсказка, удалять можно через фильтрацию по айди)
  this.setState({ users: новый_массив })
}
...
let user = this.props.users.map(function(user){
      return <li key={user.id}><User number={user.id} id={user.id} text={user.id} onDeleteClick={this.onDeleteClick}/></li>
 })
...
// где-то там в компоненте User (что там внутри не знаю, но предположим есть кнопка удаления как вы пишите)
...
render() {
 <div>
 // что-то по верстке про юзера
   <button onClick={this.props.onDeleteClick} data-my-index={this.props.user.id}> Удалить</button>
 </div>
}

Главная идея: состояние (список юзеров) хранится в родителе в стейте. Для удаления, вы должны из родителя послать функцию, в качестве одного из props, чтобы внутри этой функции изменить стейт (в родителе же). Для того, чтобы понять какого пользователя удалить, передаете какой-нибудь признак, например id из нативного data-* атрибута, который сами же и устанавливаете, передавая id в качестве props из родителя, когда рисуете User

Answer 2

[Филипп Гапоненко]

const userForRemoveId = // get this somehow
this.props.users = this.props.users.filter((user) => {
  return user.id !== userForRemoveId;
});