React Popup

by Muthuraman B

HTML

import UserAccessTermsPopup from '../components/Shared/UserAccessTermsPopup';

this.state = {showUserAccessTermsPopup: false};

toggleUserAccessTermsPopup = () => {
        this.setState({ showUserAccessTermsPopup: !this.state.showUserAccessTermsPopup });
    }
    
const {showUserAccessTermsPopup} this.state;
<UserAccessTermsPopup show={showUserAccessTermsPopup} onClose={this.toggleUserAccessTermsPopup}  />
<a onClick={this.toggleUserAccessTermsPopup}>User Access Terms</a>

React

import React, { Component } from 'react';
import { Col, Modal } from 'react-bootstrap';

export default class UserAccessTermsPopup extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {

    const { show, onClose } = this.props;

    return (
      <Modal dialogClassName="popup90" id="userAccessTermsPopup" show={show} onHide={() => { onClose(); }}>
        <Modal.Body>
          <Col md={12} sm={12} xs={12}>
            <h3 className="text-center">SAPHYRE<br />USER ACCESS TERMS</h3>
            <a className="clse" onClick={() => { onClose(); }}><i className="fa fa-times-circle" /></a>
          </Col>
          <Col md={12} sm={12} xs={12} className="margin15">
            
          </Col>
        </Modal.Body>
        <Modal.Footer></Modal.Footer>
      </Modal>
    );
  }
}