Trong Lam Phan Trong Lam Phan - 3 months ago 24
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').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"
}

Answer

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.