How to correctly implement the removal of an element in React?

Question

React

Hello. Based on the array, I build a table in React. Each row should have a button to delete that row. When clicked, a modal opens for confirmation. I did it this way:

<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>

And the DeleteItem component , inside the button and modal. And in this case, it turns out that if I have 1000 lines, then there will be 1000 modals, respectively, and each with its own local state. This can be seen if you open the modal, fill in the field and close the modal without clearing the state, and then reopen: CodeSandbox . Or would it be more correct to move the modal outside the table and pass the ID there?

Answer 1

Bring the modal to the App level, one modal per application is enough, by clicking on the button you activate it.