Por ejemplo, tengo esta función que me devuelve algunas identificaciones y elimino estas publicaciones con las identificaciones devueltas con: onClick={() => { Delete(idvalue[i]) }}
Sin embargo, necesito abrir un modal antes de eliminar el elemento preguntando si la persona está segura de que desea eliminarlo, y cuando hace clic en sí, no tengo idea de cómo pasar el valor correcto para eliminar y dónde permanecerá esto enHaga clic para abrir el modal.
function Idchecker() { for (let i = 0; i < idvalue.length; i++) { if (idvalue[i] == item.id) { return ( <div className="img-array"> <button className="click-img" onClick={() => { Delete(idvalue[i]) }}> <img src={trash} alt="botão excluir" className="imgsbtns" /> </button> <button className="click-img"> <img src={edit} alt="botão editar" className="imgsbtns" /> </button> </div> ) } } }el modal:
return ( <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered style={{ fontFamily: "Questrial" }} > <Modal.Header> <Modal.Title id="contained-modal-title-vcenter"> DELETE THE POST </Modal.Title> </Modal.Header> <Modal.Body> <p> are you sure? </p> <Button onClick={Delete}>YES</Button> </Modal.Body> <Modal.Footer> <Button onClick={props.onHide}>CLOSE</Button> </Modal.Footer> </Modal> ); }Agregue dos estados:
const [openDeleteModal, setOpenDeleteModal] = useState(false); const [deleteId, setDeleteId] = useState(null);Cuando hace clic en la publicación, debe abrir modal y actualizar deleteId, así que reescriba la función onClick:
onClick={()=>{ setDeleteId(idvalue[i]); setOpenDeleteModal(true)} }Pase deleteId y setOpenModal a través de accesorios al componente Modal y reescriba la función de los botones modales:
<Modal.Body> <p> are you sure? </p> <Button onClick={()=>{ Delete(deleteId) setOpenDeleteModal(false) //close modal after delete }}> YES </Button> </Modal.Body> <Modal.Footer> <Button onClick={()=>setOpenDeleteModal(false)}>CLOSE</Button> </Modal.Footer>