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

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'>&times;</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 :)

Does this answer your question? [Getting React component to work with jQuery listener](https://stackoverflow.com/questions/52251689/getting-react-component-to-work-with-jquery-listener) — Noam Yizraeli, Sep 26 '21 at 09:46
I used to use it with jquery but I want to learn how to do it with react without using a different library. and the example you gave doesn't work — Okay Beydanol, Sep 26 '21 at 11:55
well it looks like it worked since it was accepted and upvoted, and if you wanted to know of a better solution with react then your question should reflect that (not that the current solution just doesn't work with jquery) — Noam Yizraeli, Sep 26 '21 at 11:58

score 0 · Accepted Answer · answered Sep 26 '21 at 12:10

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'>&times;</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>
                );
            })
        }
    )
}

score 0 · Answer 2 · answered Sep 28 '21 at 15:42

0

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

answered Sep 28 '21 at 15:42

Okay Beydanol

23
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 28 '21 at 18:13

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

2 Answers2