ReactJS Modal hide by jquery imported via NPM

Question

I know I should not use jquery in my react app. But I will.

Now that we got that out of the way, I keep getting: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function

I import jquery like this:

import $ from 'jquery';


class ReportTab extends Component {

    test(){
        $('#myModal').modal('hide')
    }

    render() {
        return (
        <div>
            <button onClick={this.test.bind(this}>Close</button>

            <div className="modal fade" id="myModal" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="report-daypicker-container">
                            <DayPicker onDayClick={this.test.bind(this)}/>
                        </div>
                        <div className="close-modal-container">
                            <button className="global-button global-button-active close-modal-btn" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        )
    }
}

Answer 1

Try:

$('#myModal').hide();

If that doesn't work make sure you only have 1 element with the id myModal being rendered.

Answer 2

i think jquery is not enough for modal functions. For modal functions you must add jquery-ui to your component.