React как удалить элемент?

Question

[trybr]

Добрый вечер!

Есть данные в виде фоток:

const my_photo = [
{
"sample_url": "https://site.com/photo.jpg"
},
{
"sample_url": "https://site.com/photo.jpg"
},
{
"sample_url": "https://site.com/photo.jpg"
}
];

Есть компонент, который всё это выводит и отрисовывает. Всё с этим хорошо, но, возникла потребность удалять элемент по клику на кнопку.

Уже кучу статей и документаций перерыл, но никак не могу понять, каким образом удалить элемент или несколько элементов. Реакт вообще может отрисованный элемент удалить из дом или что-то типа того?

Answer 1

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

Примерно так:

import React, { Component } from 'react';

class List extends Component {
  state = {
    elements: [
      {
        id: 1,
        title: 'First',
      },
      {
        id: 2,
        title: 'Second',
      },
    ],
  };
  
  handleDeleteElement = id => {
    this.setState(prevState => ({
      elements: prevState.elements.filter(el => el.id != id);
    }));
  };
  
  render() {
    const { elements } = this.state;
    
    return (
      <ul>
        {elements.map(el => (
          <li
            key={el.id}
            onClick={() => { this.handleDeleteElement(el.id) }}
          >
            {el.title}
          </li>
        ))}
      </ul>
    )
  }
}

Answer 2

[Саша Железовский]

deleteItem = (id) => {
    this.setState(({ todoData }) => {
      const idx = todoData.findIndex((el) => el.id === id);

      const newArray = [
        ...todoData.slice(0, idx),
        ...todoData.slice(idx + 1)
      ];

      return {
        todoData: newArray
      };
    });
  };