react-modal-sample

create-group-modal.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Input, Form } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

const formItemLayout = {
  wrapperCol: {
    span: 25
  }
};

class CreateGroupModal extends Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.visible !== prevState.visible) {
      return {
        visible: nextProps.visible,
        scope: nextProps.group.scope || 'global',
        name: nextProps.group.name
      };
    }
    return null;
  }

  done = () => {
    const { onOk } = this.props;
    const { name, description } = this.state;

    onOk({ name, description });
  };

  render() {
    const { onCancel, title } = this.props;
    const { visible, name, description } = this.state;
    return (
      <Modal visible={visible} onOk={this.done} title={title} onCancel={onCancel}>
        <Form layout="horizontal">
          <FormItem {...formItemLayout} label="Name">
            <Input value={name} onChange={e => this.setState({ name: e.target.value })} required />
          </FormItem>
          <FormItem {...formItemLayout} label="Description">
            <TextArea
              value={description}
              rows={2}
              onChange={e => this.setState({ description: e.target.value })}
            />
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

CreateGroupModal.defaultProps = {
  group: {}
};

CreateGroupModal.propTypes = {
  group: PropTypes.shape({ name: PropTypes.string, scope: PropTypes.string }),
  onOk: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired
};

export default CreateGroupModal;

index.js

render() {
  const { showCreateGroupModal } = this.state;
    return (
    <CreateGroupModal
      visible={showCreateGroupModal}
      title="New Group"
      onCancel={() => {
        this.setState({ showCreateGroupModal: false });
      }}
      onOk={async ({ name, description }) => {
        // execute actions (for example send post request)
        this.setState({ showCreateGroupModal: false });
      }}
    />)
}