BetterSemanticConfirm.js

BetterSemanticConfirm.js

import React, { Component } from "react";
import { Button, Modal } from "semantic-ui-react";

export class Confirm extends Component {
  state = { open: false };
  static defaultProps = {
    onClose: () => {}
  };
  _handleClose = () => {
    this.setState({ open: false });
    this.props.onClose();
  };
  render() {
    const { trigger, ...props } = this.props;
    return (
      <React.Fragment>
        {React.cloneElement(trigger, {
          onClick: e => {
            this.setState({ open: true });
          }
        })}
        <div
          onClick={e => {
            e.stopPropagation();
          }}
        >
          <Modal open={this.state.open} onClose={this._handleClose} {...props}>
            <Modal.Header>Confirm</Modal.Header>
            <Modal.Content>Are you sure?</Modal.Content>
            <Modal.Actions>
              <Button primary>Yes</Button>
              <Button onClick={this._handleClose} basic>
                No
              </Button>
            </Modal.Actions>
          </Modal>
        </div>
      </React.Fragment>
    );
  }
}