React call bootstrap function?

Question

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').modal();

or

ReactDOM.findDOMNode(this.refs.myModal).modal();

or

$(this.refs.myModal).modal();

My modal:

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

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 !

Update

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>
</div>

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

may be my question is stupid, but did you include all the js code of bootstrap and did you include the modal when downloading the bootstrap package? — Dimitri L.
Also, fid you make sure you included the BootStrap resource in the right place? i.e., if $().modal() gets called immediately on load, is the bootstrap file included before your react file? — itcropper
@DimitriL. Yes, i did. In fact, all of others bootstrap's components like carousel, button .. work well. — Trong Lam Phan
@eastbeast Yes, the bootstrap script is right before the react script in my index.html. — Trong Lam Phan

Trong Lam Phan Trong Lam Phan · Accepted Answer · 2016-08-30T11:08:16

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:

require('bootstrap')
// 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

jQuery('#my-modal').modal();

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

React call bootstrap function?

1 Answers