pass an id into the modal in React

Question

EDIT: I have a crud in React, and in it one of the buttons is to delete a user. When I click delete, open a modal to confirm, below the button, sending the id to be deleted:

<button className="custom-button"
    onClick={event => openModalDelete(event, user.id)}
    value={user.id} style={{ marginLeft: "6%" }}>Deletar
</button>

here follows the code of the function that opens the modal, and in this case printa the received id correctly, from the selected user, the modal appears and everything ok.

const openModalDelete = (e, id) => {
        e.preventDefault();
        console.log(id, 'id recebido');
        showModal = !showModal;
        const element = document.getElementById('modal');

        setTimeout(() => {
            if (showModal) {
                element.classList.add('modal-show')
            }
            else {
                element.classList.remove('modal-show')
            }
        }, 250);
    }

So far ok: But then to delete you need to confirm. By clicking confirm, I do not know how to receive the id. I tried with e.target.value but nothing comes in.

  const handleDelete = async (e) => {
        console.log("deleting", e);
        //const deletedId = await e.target.value;
        //await api.delete(`/users/${deletedId}`);
        //window.location.reload();
    }

Now here is the modal:

<div id="modal">
    <div >
         <div className="container">
            <a href="/" onClick={event => openModalDelete(event)} style={{ color: "black" }}>x</a>
              <div style={styles.alignCenter}>
                     Deseja realmente deletar?
              </div>
                <button style={styles.alignCenter} className="custom-button" 
                onClick={event => handleDelete(event)}>Deletar</button>
         </div>
     </div>
</div>

In this Event q goes on handleDelete, it goes empty.

I ended up solving here doing a global Let, which receives where he sees the id (when he opens the modal) and keeps, and then this one he can see

But still, I don’t know if it’s the right way to pass on the id. Any ideas? About deleting and updating the page? This shouldn’t be good practice, right?

It’s my first post here, if you need more code, please let me know. Thank you.

Answer 1

It turns out that when you open the modal, even if you pass to this function of opening the modal the parameter you need, you can’t pass to the function you use for the deleting action.

The solution you mentioned about leaving a global variable may not be a better solution. Or you can use the state even putting for example a property type selectedItem or use a modal reference with useRef and when opening the modal set a property of it as id who was selected.

With the solution you are using today I would leave in the same state.