userSessionWidget.js

import React, { Component } from "react";
import Button from "react-bootstrap/esm/Button";
import Modal from "react-bootstrap/Modal";
class userSessionWidget extends Component {

    constructor(props) {
        super(props)
        this.state = {show: false};
        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    handleShow(e) {
        e.preventDefault();
        this.setState({show: true})
    }

    handleClose(e) {
        e.preventDefault();
        this.setState({show: false})
    }

    render() {
        return (
            <div>
                <Button variant="primary" onClick={this.handleShow}>
                    Login
                </Button>

                <Modal show={this.state.show} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal title</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        <p>Modal body text goes here.</p>
                    </Modal.Body>

                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.handleClose}>Close</Button>
                        <Button variant="primary" onClick={this.handleShow}>Save changes</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        )
    }
}

export default userSessionWidget