Source: Popup/EndpointPopup.jsx

import PropTypes from 'prop-types';
import React from 'react';
import Popup from 'reactjs-popup';
import Combobox from 'react-widgets/lib/Combobox';
import './Popup.css';
import 'react-widgets/dist/css/react-widgets.css';

/**
 * @file EndpointPopup
 * Handling new endpoint modal
 * @module EndpointPopup
 * @extends React.Component
 */
export default class EndpointPopup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      endpoint: '',
      endpointName: '',
    };
  }

  /**
   * Handle user input
   * @method
   * @param {Event} e - text input event
   */
  handleEndpointName = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  /**
   * Handle saving new link information
   * @method
   */
  handleSave = () => {
    const { endpoint, endpointName } = this.state;
    const { onNewEndpoint } = this.props;
    onNewEndpoint(endpoint, endpointName);
  };

  render() {
    const { endpoints } = this.props;
    const { endpointName } = this.state;

    return (
      <Popup
        trigger={
          <button type="button" className="btn add-enpoint-btn">
            Add Endpoint
          </button>
        }
        modal
      >
        {(close) => (
          <div className="modal">
            <h3 className="header"> Add Endpoint </h3>
            <h4> Choose Endpoint</h4>
            <div className="content">
              <Combobox
                suggest
                data={endpoints}
                onChange={(endpoint) => this.setState({ endpoint })}
              />

              <h4> Enter Endpoint Name: </h4>
              <input
                type="text"
                name="endpointName"
                value={endpointName}
                onChange={this.handleEndpointName}
              />
            </div>

            <div className="actions">
              <button
                type="button"
                className="btn save-btn"
                onClick={() => {
                  this.handleSave();
                  close();
                }}
              >
                Save
              </button>
            </div>
          </div>
        )}
      </Popup>
    );
  }
}

EndpointPopup.propTypes = {
  endpoints: PropTypes.instanceOf(Array).isRequired,
  onNewEndpoint: PropTypes.func.isRequired,
};