Create Modal with reactjs bootstrap - reactjs

Question

I am getting kind of desperated. I want to make an modal dialog in reactjs using bootstrap. I have installed the module with npm and imported it in my code. I tried a simple example:
import React from 'react';
import {Modal, Button } from 'react-bootstrap';
class Config extends React.Component {
constructor(){
super();
this.state = {
show: false
}
this.handleHide = this.handleHide.bind(this);
}
handleHide() {
this.setState({ show: false });
}
render(){
return ( <div>
<Button
bsStyle="primary"
bsSize="large"
onClick={() => this.setState({ show: true })}
>
Launch modal
</Button>
<Modal show={this.state.show} onHide={this.handleHide}>
<Modal.Header >
Header
</Modal.Header>
<Modal.Body>
Text
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleHide}>Close</Button>
</Modal.Footer>
</Modal>
</div>)
}
}
export default Config;
I dont get any error, but I also cant see anything, if I click on the button. I looked with the Chrome developer tool through the Elements and I can see the modal there, which is confusing.
Does someone has an idea what is wrong?

Answer 1

This worked for me it's almost identical to your example. However, instead of using one function to handle the state by itself, I used 2 functions for the handleClose and HandleShow.
import React from 'react';
import { Link } from 'react-router-dom';
import { Modal, Button } from 'react-bootstrap';
class Header extends React.Component {
constructor(props){
super(props);
this.handleClose = this.handleClose.bind(this);
this.handleShow = this.handleShow.bind(this);
this.state = {
show: false
}
}
handleClose(){
this.setState({
show:false
});
}
handleShow(){
this.setState({
show:true
});
}
render(){
// console.log(this.state);
return (
<div className="header-container">
<nav className="navbar navbar-dark bg-dark">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/Contact">Contact</Link></li>
<li><Button className="login-button" onClick={this.handleShow}>LOGIN</Button></li>
</ul>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal Header</Modal.Title>
</Modal.Header>
<Modal.Body>
Modal Body
</Modal.Body>
</Modal>
</nav>
</div>
)
}
}
export default Header;