EDIT: Tenho um crud em react, e nele um dos botões é de deletar um user. Quando clico em deletar, abre uma modal para confirmar, abaixo o botão, mandando o id a ser deletado:
<button className="custom-button"
onClick={event => openModalDelete(event, user.id)}
value={user.id} style={{ marginLeft: "6%" }}>Deletar
</button>
aqui segue o código da função que abre a modal, e nesse caso printa o id recebido corretamente, do user selecionado, a modal aparece e tudo 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);
}
Até aí ok: Porém em seguida para deletar é preciso confirmar. Ao clicar em confirmar, eu não sei como receber o id. Tentei com e.target.value mas não vem nada.
const handleDelete = async (e) => {
console.log("deleting", e);
//const deletedId = await e.target.value;
//await api.delete(`/users/${deletedId}`);
//window.location.reload();
}
Agora aqui a 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>
Nesse event q vai na handleDelete, ele vai vazio.
acabei resolvendo aqui fazendo uma let global, que recebe onde ele vê o id (quando abre a modal) e guarda, e depois nessa aí ele consegue enxergar
Mas ainda assim, não sei se é a forma correta de passar adiante o id. Alguma idéia? Sobre deletar e atualizar a página? Isso não deve ser uma boa prática né?
É meu primeiro post aqui, se precisar de mais code, por favor me avise. Obrigado.