Error in popup when indicating an id to confirm an operation in recatjs

Question

I'm developing an application in React.JS

I need to show a popup to validate an operation.

The code:

const App = () => {
  ...
  const body = () => {
    return (
      item &&
      item.map((elem, j) => {
        return (
          <tr key={elem.id}>
            <td>
              <span>{elem.cat}</span>
            </td>
            <td>
              <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                  <Modal.Title>Warning!</Modal.Title>
                </Modal.Header>
                <Modal.Body>Warning!</Modal.Body>
                <Modal.Footer>
                  <Button onClick={handleClose}>Cancel</Button>
                  <Button onClick={() => remove(elem.id)}>Delete</Button>
                </Modal.Footer>
              </Modal>
              <span onClick={handleShow}>
                <span>Delete</span>
              </span>
            </td>
          </tr>
        );
      })
    );
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>
              <span>Category</span>
            </th>
          </tr>
        </thead>
        <tbody>{body()}</tbody>
      </table>
    </div>
  );
};

It happens that the popup is taking the last id of the table as ordered, but I need it to be the one that corresponds to that row.

Instead of having Modal for each row, create separate Modal component and pass clicked row's id to modal and display it. — Gaurav Vichare, Dec 28 '20 at 14:22

score 0 · Accepted Answer · answered Dec 28 '20 at 16:37

Reading this answer https://stackoverflow.com/a/63551465/14678573 I have managed to solve the problem.

const [show, setShow] = useState(false);
const [selected, setSelected] = useState({});

const handleClose = () => setShow(false);
const handleShow = (selected) => {
  setSelected(selected);
  setShow(true);
  };

Error in popup when indicating an id to confirm an operation in recatjs

1 Answers1