Modal not displaying on click (React) - reactjs

Question

I am trying to get a modal to function the modal I am trying to mirror is available here.
https://codesandbox.io/s/n9zn3n43o0
The button for the modal is displaying however the modal itself is not.
Here is my exact code for this function.
class App extends React.Component {
constructor(props) {
console.log("Props - ", props);
super(props);
this.state = {
modalVisible: false
};
this.openModal = this.openModal.bind(this);
}
openModal() {
console.log("Open modal called ", this.state.modalVisible);
const modalVisible = !this.state.modalVisible;
this.setState({
modalVisible
});
}
render() {
let styles = this.state.modalVisible
? { display: "block" }
: { display: "none" };
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button
type="button"
onClick={this.openModal}
className="btn btn-info btn-lg"
>
Open Modal
</button>
<div
id="myModal"
className="modal fade in"
role="dialog"
style={styles}
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
onClick={this.openModal}
className="close"
>
×
</button>
<h4 className="modal-title">Modal Header</h4>
</div>
<div className="modal-body">
<p>Some text in the modal.</p>
</div>
<div className="modal-footer">
<button
onClick={this.openModal}
type="button"
className="btn btn-default"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
And here is the code of the whole page
import React from "react";
import { Link } from "react-router-dom";
import Popup from "reactjs-popup";
import { Button, ButtonToolbar, Modal } from "react-bootstrap";
import ReactDOM from "react-dom";
import AddWorkstation from "./UpdateUserWorkStationDetailsForm";
class DisplayUserAcountDetails extends React.Component {
constructor() {
super();
this.state = { AccountDetails: [] };
}
// sets the questions form sql into state for questions
getItems() {
var user = window.localStorage.getItem("User");
if (user) {
fetch(`/profile-work-station-detailss/${user}`)
.then(recordset => recordset.json())
.then(results => {
this.setState({ AccountDetails: results.recordset });
});
} else {
alert("user not set");
}
}
//when the component mounts make the sql questions the
componentDidMount() {
this.setState({
AccountDetails: this.getItems()
});
}
render() {
try {
return (
<>
<h3 style={{ textAlign: "center" }}> Workstations</h3>
<button></button>
{this.state.AccountDetails ? (
<ul>
<App /> // calling it here
<Popup
style={{ width: "300px" }}
trigger={<button> Help?</button>}
closeOnDocumentClick
className={"tooltipBoundary"}
>
<AddWorkstation />
</Popup>
<Link to="/update-work-station-details">
<button style={{ float: "right" }}>+</button>
</Link>
<br />
<br />
{this.state.AccountDetails &&
this.state.AccountDetails.map(function(AccountDetails, index) {
return (
<div className="jumbotron">
<h3>Work Station</h3>
<li> Location: {AccountDetails.DeskLocation}</li>
<li>
ExtraInformation: {AccountDetails.ExtraInformation}
</li>
<li>
Primary Work Station:
{AccountDetails.PrimaryWorkStation}
</li>
<li> Date Added: {AccountDetails.PrimaryWorkStation}</li>
<li>
<Link to="/update-work-station-details">
<button>Update Account Details</button>
</Link>
</li>
</div>
);
})}
</ul>
) : (
<ul>
<div className="jumbotron">
<h3>Work Station</h3>
<li> Email: Null </li>
<li> Name: Null </li>
<li> Contact Number: Null </li>
<li>
<Link to="/update-work-station-details">
<button>Update Accoudnt Details</button>
</Link>
</li>
</div>
</ul>
)}
</>
);
} catch (e) {
console.log(e);
}
}
}
export default DisplayUserAcountDetails;
class App extends React.Component {
constructor(props) {
console.log("Props - ", props);
super(props);
this.state = {
modalVisible: false
};
this.openModal = this.openModal.bind(this);
}
openModal() {
console.log("Open modal called ", this.state.modalVisible);
const modalVisible = !this.state.modalVisible;
this.setState({
modalVisible
});
}
render() {
let styles = this.state.modalVisible
? { display: "block" }
: { display: "none" };
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button
type="button"
onClick={this.openModal}
className="btn btn-info btn-lg"
>
Open Modal
</button>
<div
id="myModal"
className="modal fade in"
role="dialog"
style={styles}
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
onClick={this.openModal}
className="close"
>
×
</button>
<h4 className="modal-title">Modal Header</h4>
</div>
<div className="modal-body">
<p>Some text in the modal.</p>
</div>
<div className="modal-footer">
<button
onClick={this.openModal}
type="button"
className="btn btn-default"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
I have tried multiple examples but this issue still persists.
Is there something I am missing ?
Any help greatly appreciated.

Answer 1

Hope this helps someone this is the code I have used instead and it worked fine.
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">
<Button onClick={this.handleShow}>LOGIN</Button>
<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>
</div>
);
}
}