Как в React правильно реализовать удаление элемента?

Question

[AltaiR]

Всем привет. На основе массива строю в реакте таблицу. В каждой строке должна быть кнопка для удаления этой строки. При нажатии открывается модалка для подтверждения. Я сделал вот таким образом:

<Table>
  <tbody>
    {tableData.map(({ id, name }) => (
      <tr key={id}>
        <td>{name}</td>
        <td className="text-right">
          <DeleteItem id={id} deleteItem={deleteItem} />
        </td>
      </tr>
    ))}
  </tbody>
</Table>

И компонент DeleteItem, внутри кнопка и модалка. И в таком случае получается, что если у меня будет 1000 строк то будет соответственно 1000 модалок и каждый со своим локальным стейтом. Это можно увидеть, если открыть модалку, заполнить поле и закрыть модалку при этом не очищая стейт, и потом заново открыть: CodeSandbox. Или же будет правильнее вынести модалку за пределы таблицы и туда прокидывать ID?

Answer 1

[Дмитрий]

Модалку вывести на уровень App, одной модалки на приложение достаточно, по нажатии на кнопку ее активируете.