title: React modal hidden.bs.modal event dosen't work?
body: <p>Modal.js</p>
  <pre><code>import React from 'react';
  import $ from 'jquery';
  
  const Modal = (props) =&gt; {
    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) =&gt; response.json())
        .then((data) =&gt; {
          console.log(data);
        });
    }
    function onModalDismissEvent(e) {
      props.onClose(false);
    }
    $('#exampleModal').on('hidden.bs.modal', (e) =&gt; {
      console.log(e);
    });
    return (
      &lt;div
        className='modal fade'
        id='exampleModal'
        tabIndex='-1'
        aria-labelledby='exampleModalLabel'
        aria-hidden='true'
      &gt;
        &lt;div className='modal-dialog'&gt;
          &lt;div className='modal-content'&gt;
            &lt;div className='modal-header'&gt;
              &lt;h5 className='modal-title' id='exampleModalLabel'&gt;
                Resimler
              &lt;/h5&gt;
              &lt;button
                type='button'
                className='close'
                data-dismiss='modal'
                aria-label='Close'
                onClick={onModalDismissEvent}
              &gt;
                &lt;span aria-hidden='true'&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div className='modal-body'&gt;
              {props.product.slider.map((e) =&gt; {
                return (
                  &lt;div key={e.products_slider_guid}&gt;
                    &lt;img
                      height='150px'
                      src={'http://example.test/' + e.image}
                      alt={e.created_at}
                    /&gt;
                    &lt;button className='btn btn-outline-primary mr-2'&gt;
                      Update
                    &lt;/button&gt;
                    &lt;button
                      onClick={onClickHandler}
                      className='btn btn-outline-danger mr-2'
                      guid={e.products_slider_guid}
                    &gt;
                      Delete
                    &lt;/button&gt;
                  &lt;/div&gt;
                );
              })}
            &lt;/div&gt;
            &lt;div className='modal-footer'&gt;
              &lt;button className='btn btn-outline-primary mr-4' type='button'&gt;
                Save
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Modal;
  </code></pre>
  <p>Main.js</p>
  <pre><code>import React, { useContext, useState } from 'react';
  import ProductContext from '../store/product-context';
  import Modal from './Modal';
  const Main = (props) =&gt; {
    const [productImageHandler, setProductImageHandler] = useState(false);
    const [findProductHandler, setFindProductHandler] = useState('');
    const productCtx = useContext(ProductContext);
  
    const onClickHandler = (event) =&gt; {
      const findProduct = productCtx.items.find((item) =&gt; {
        return item.product_guid === event.target.attributes.guid.value;
      });
      setFindProductHandler(findProduct);
      setProductImageHandler(true);
    };
    const onCloseHandler = (e) =&gt; {
      setProductImageHandler(e);
    };
  
    return (
      &lt;div&gt;
        &lt;main ref={(modal) =&gt; modal} role='main' className='container mt-5'&gt;
          &lt;div className='row'&gt;
            &lt;div className='col-xl-12'&gt;
              {productCtx.items.map((item) =&gt; {
                return (
                  &lt;div key={item.id} className='list-group'&gt;
                    &lt;div className='list-group-item d-flex justify-content-between align-items-center'&gt;
                      {item.name}
                      &lt;div&gt;
                        &lt;button
                          className='btn btn-outline-info mr-2'
                          data-toggle='modal'
                          data-target='#exampleModal'
                          onClick={onClickHandler}
                          guid={item.product_guid}
                        &gt;
                          Images
                        &lt;/button&gt;
  
                        &lt;button className='btn btn-outline-danger mr-2'&gt;
                          Delete
                        &lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                );
              })}
            &lt;/div&gt;
          &lt;/div&gt;
          {productImageHandler &amp;&amp; (
            &lt;Modal onClose={onCloseHandler} product={findProductHandler} /&gt;
          )}
        &lt;/main&gt;
      &lt;/div&gt;
    );
  };
  
  export default Main;
  </code></pre>
  <p>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</p>
  <p>I've been dealing with it since yesterday morning React is a bit complicated core javascript is easier :)</p>