Trong Lam Phan Trong Lam Phan - 6 months ago 44
React JSX Question

React call bootstrap function?

For some reason, i cannot use react-bootstrap. So I'd like to call bootstrap's functions like 'modal' but it seems not work and i got this error:

modal is not a function

This is what i tried in componentDidMount():






My modal:

<div class="modal fade" id="my-modal" ref="myModal">

I'd like to know if there's a solution for that problem or i must to use some libraries like 'react-bootstrap' ?

Thank you !


To be sure that the bootstrap script is loaded before the "modal" function is called, i added a button:

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#my-modal">Open Modal</button>

When this button is clicked, the modal opens. Now, i created a form in the modal with onSubmit function

<div class="modal fade" id="my-modal" ref="myModal">
<form onSubmit={this.testModal}>...</form>

testModal() {
// here i tried to call modal('hide') like i did above, but still get the error "modal is not a function"


I figure out how to solve this problem. Firstly, i need to make jQuery global (i don't know why $ didn't work, or maybe is conflicted)

import jQuery from 'jquery';
window.jQuery = jQuery;

Then, i need to require bootstrap in my js file:

// or just require('bootstrap/js/modal'); require('bootstrap/js/transition');

instead of include this script in index.html:

<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Now, i'm able to call


UPDATE: I find out that maybe there is a problem if you don't add jQuery.noConflict(true) in your constructor.