Why is Modal opening but not closing - reactjs

Question

Good evening I am learning modals but I ran into a problem, the openModal() function works just fine but I cant get it to close...
Code:
import React, { Component } from 'react';
import './Navbar.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Navbar, NavbarBrand, Nav, InputGroup, FormControl, Modal, Button, ButtonGroup } from 'react-bootstrap';
import { library } from '#fortawesome/fontawesome-svg-core';
import { fab } from '#fortawesome/free-brands-svg-icons';
import Foot from './Footer'
import Today from '../Main/Home'
import Account from '../AccountPage/Account'
import Pool from '../PoolPage/Pool'
import Stats from '../StatsPage/Stats'
import BondingCard from '../BondPage/BondCard'
import AdCard from '../AdPage/AdHome'
library.add(fab)
class Navy extends Component {
constructor(props) {
super(props);
this.state = {
content: <Today />,
showlogin: false
}
this.homepage = this.homepage.bind(this);
this.accountpage = this.accountpage.bind(this);
this.statspage = this.statspage.bind(this);
this.poolpage = this.poolpage.bind(this);
this.loanpage = this.loanpage.bind(this);
this.adpage = this.adpage.bind(this);
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
homepage() {
this.setState({content: <Today/>});
}
accountpage() {
this.setState({content: <Account/>})
}
statspage() {
this.setState({content: <Stats/>})
}
poolpage() {
this.setState({content: <Pool/>})
}
loanpage() {
this.setState({content: <BondingCard/>})
}
adpage() {
this.setState({content: <AdCard/>})
}
openModal() {
this.setState({ showlogin: true });
}
closeModal() {
this.setState({ showlogin: false });
}
render() {
return (
<div>
<Navbar bg='light' variant='light' >
<div className='logo'>
<Container >
<NavbarBrand className='brandcolor'>
<h1>ETHER<span>SHARE<i className="fab fa-ethereum"></i></span></h1>
</NavbarBrand>
</Container>
</div>
<div className='wbtn' onClick={this.openModal}>
<h3><i class="fas fa-exclamation-triangle"></i>Connect|Login<i class='fas fa-exchange-alt'></i></h3>
<Modal show={this.state.showlogin} onHide={this.closeModal} size='lg' centered>
<Modal.Header closeButton>
<Modal.Title className='cent'>
<ButtonGroup size="sm" className="mb-2">
<Button variant='dark'>Login</Button>
<Button variant='dark'>Register</Button>
</ButtonGroup>
</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.closeModal}>
Close
</Button>
<Button variant="primary" onClick={this.closeModal}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
<Container>
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1"><i class="fas fa-user-plus" aria-hidden="true"></i></InputGroup.Text>
<FormControl
placeholder="#username (search)"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</InputGroup>
</Container>
<Container >
<Nav >
<ul className='menuItems'>
<div className='mainmenu'>
<Nav.Link className='linkitem'>
<li onClick={this.homepage}>
<i class="fa fa-home" aria-hidden="true"></i>
Home
<div className='arrow'>
<i class="fa fa-angle-double-right" ></i>
</div>
</li>
</Nav.Link>
<Nav.Link className='linkitem'>
<li onClick={this.accountpage}>
<i class="fa fa-cog" aria-hidden="true"></i>
Account
<div className='arrow'>
<i class="fa fa-angle-right"></i>
</div>
</li>
</Nav.Link>
<Nav.Link className='linkitem'>
<li onClick={this.poolpage}>
<i class="fa fa-rocket" aria-hidden="true"></i>
Pool
<div className='arrow'>
<i class="fa fa-angle-right"></i>
</div>
</li>
</Nav.Link>
<Nav.Link className='linkitem'>
<li onClick={this.loanpage}>
<i class="fa fa-university" aria-hidden="true"></i>
Loan|Borrow
<div className='arrow'>
<i class="fa fa-angle-right"></i>
</div>
</li>
</Nav.Link>
<Nav.Link className='linkitem'>
<li onClick={this.adpage}>
<i class="fa fa-plus" aria-hidden="true"></i>
Ads(earn crypto)
<div className='arrow'>
<i class="fa fa-angle-right"></i>
</div>
</li>
</Nav.Link>
<Nav.Link className='linkitem'>
<li onClick={this.statspage}>
<i class="fa fa-signal" aria-hidden="true"></i>
Stats
<div className='arrow'>
<i class="fa fa-angle-right"></i>
</div>
</li>
</Nav.Link>
</div>
</ul>
</Nav>
</Container>
<div className='footy'>
< Foot />
</div>
</Navbar>
{this.state.content}
</div>
)
}
};
export default Navy;
Does anyone know what I did wrong? Error in my 2 functions? This is the entire file, everything works but closeModal()...
dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddd
ddddddddddd

Answer 1

You need to use setTimeOut, please try my experiment
Here
closeModal() {
let vm = this;
setTimeout(() => {
vm.setState({ showlogin: false });
}, 100);
}