React modal hidden.bs.modal event dosen't work? - reactjs

Question

Modal.js
import React from 'react';
import $ from 'jquery';
const Modal = (props) => {
function onClickHandler(e) {
fetch(
'http://reactapi.test/api/product/delete/' +
e.target.attributes.guid.value,
{
method: 'get',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}
)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
}
function onModalDismissEvent(e) {
props.onClose(false);
}
$('#exampleModal').on('hidden.bs.modal', (e) => {
console.log(e);
});
return (
<div
className='modal fade'
id='exampleModal'
tabIndex='-1'
aria-labelledby='exampleModalLabel'
aria-hidden='true'
>
<div className='modal-dialog'>
<div className='modal-content'>
<div className='modal-header'>
<h5 className='modal-title' id='exampleModalLabel'>
Resimler
</h5>
<button
type='button'
className='close'
data-dismiss='modal'
aria-label='Close'
onClick={onModalDismissEvent}
>
<span aria-hidden='true'>×</span>
</button>
</div>
<div className='modal-body'>
{props.product.slider.map((e) => {
return (
<div key={e.products_slider_guid}>
<img
height='150px'
src={'http://example.test/' + e.image}
alt={e.created_at}
/>
<button className='btn btn-outline-primary mr-2'>
Update
</button>
<button
onClick={onClickHandler}
className='btn btn-outline-danger mr-2'
guid={e.products_slider_guid}
>
Delete
</button>
</div>
);
})}
</div>
<div className='modal-footer'>
<button className='btn btn-outline-primary mr-4' type='button'>
Save
</button>
</div>
</div>
</div>
</div>
);
};
export default Modal;
Main.js
import React, { useContext, useState } from 'react';
import ProductContext from '../store/product-context';
import Modal from './Modal';
const Main = (props) => {
const [productImageHandler, setProductImageHandler] = useState(false);
const [findProductHandler, setFindProductHandler] = useState('');
const productCtx = useContext(ProductContext);
const onClickHandler = (event) => {
const findProduct = productCtx.items.find((item) => {
return item.product_guid === event.target.attributes.guid.value;
});
setFindProductHandler(findProduct);
setProductImageHandler(true);
};
const onCloseHandler = (e) => {
setProductImageHandler(e);
};
return (
<div>
<main ref={(modal) => modal} role='main' className='container mt-5'>
<div className='row'>
<div className='col-xl-12'>
{productCtx.items.map((item) => {
return (
<div key={item.id} className='list-group'>
<div className='list-group-item d-flex justify-content-between align-items-center'>
{item.name}
<div>
<button
className='btn btn-outline-info mr-2'
data-toggle='modal'
data-target='#exampleModal'
onClick={onClickHandler}
guid={item.product_guid}
>
Images
</button>
<button className='btn btn-outline-danger mr-2'>
Delete
</button>
</div>
</div>
</div>
);
})}
</div>
</div>
{productImageHandler && (
<Modal onClose={onCloseHandler} product={findProductHandler} />
)}
</main>
</div>
);
};
export default Main;
Modal hidden listener never trigger.
I'm trying to trigger the closing event when clicking the modal backdrop, but it doesn't work.
Is there anyone who can help, I'm not sure if I did the logic right now, I just started writing react
I've been dealing with it since yesterday morning React is a bit complicated core javascript is easier :)

Answer 1

after getting a better understanding of your issue at hand, you can add another prop to help to determine whether to show the component or keep it hidden. on each change on the variable in the useEffect array the function will trigger, check out react's docs on useEffect
Here's a simple example:
import React, { useEffect } from 'react';
const Modal = (props) => {
function onModalDismissEvent(e) {
props.onClose(false);
}
useEffect(() => {
return () => {
console.log("changed");
};
}, [props.hidden]) // "hidden" could be replaced with "closed" if such a prop exists that matches "props.onClose"
return (
<div
className='modal fade'
id='exampleModal'
tabIndex='-1'
aria-labelledby='exampleModalLabel'
aria-hidden='true'
>
<div className='modal-dialog'>
<div className='modal-content'>
<div className='modal-header'>
<h5 className='modal-title' id='exampleModalLabel'>
Resimler
</h5>
<button
type='button'
className='close'
data-dismiss='modal'
aria-label='Close'
onClick={onModalDismissEvent}
>
<span aria-hidden='true'>×</span>
</button>
</div>
<div className='modal-body'>
<Product product={props.product} />
</div>
<div className='modal-footer'>
<button className='btn btn-outline-primary mr-4' type='button'>
Save
</button>
</div>
</div>
</div>
</div>
);
};
export default Modal;
//Product.jsx
const Product = ({ product }) => {
function onClickHandler(e) {
fetch(
'http://reactapi.test/api/product/delete/' +
e.target.attributes.guid.value,
{
method: 'get',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
}
)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
}
return (
{
product.slider.map((e) => {
return (
<div key={e.products_slider_guid}>
<img
height='150px'
src={'http://example.test/' + e.image}
alt={e.created_at}
/>
<button className='btn btn-outline-primary mr-2'>
Update
</button>
<button
onClick={onClickHandler}
className='btn btn-outline-danger mr-2'
guid={e.products_slider_guid}
>
Delete
</button>
</div>
);
})
}
)
}

Answer 2

Thank you for your help, I understand what you mean.