'ReactJs onClick function not working in bootstrap4 modal

hi I have imported bootstrap sources like this in my React project index.html file:

<script src="%PUBLIC_URL%/assets/js/jquery.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/bootstrap.min.js"></script>

and every thing from Bootstrap is working fine expect onClicks in modal. here is my component :

{<!-- Modal -->}
<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">Modal title</h5>
        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div className="modal-body">
        ...
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary"
           onClick={()=>{console.log("Hello")}}>Save changes</button>
      </div>
    </div>
  </div>
</div>

how to solve this problem? I can't start using React-bootstrap because my whole project has been programmed by normal bootstrap.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source