CreateUserModal-v3.js

import autobind from 'autobind-decorator';
import React from 'react';
import { inject, observer } from 'mobx-react';

import CreateUserModalStore from './CreateUserModalStore';

export default class CreateUserModal extends React.Component {
  constructor(props) {
    super(props);
    this.modalStore = new CreateUserModalStore();
  }

  @autobind
  onUserNameChanged(event) {
    this.modalStore.setUserName(event.target.value);
  }

  // ...

  @autobind
  onSubmit(event) {
    event.preventDefault();

    const { context, onSubmit } = this.props;
    sendEvent({ name: 'createUserModalSubmitted', context });
    onSubmit(this.modalStore.user);
  }

  @autobind
  onClose() {
    const { context, onClose } = this.props;
    sendEvent({ name: 'createUserModalClosed', context });
    onClose();
  }

  render() {
    const { isOpen, isLoading, errorMessage } = this.props;

    if (isLoading) {
      return <Spinner />;
    }

    return (
      <Modal show={isOpen} onClose={this.onClose}>
        <Form onSubmit={this.onSubmit}>
          <Form.Control
            type="text"
            placeholder="name"
            onChange={this.onUserNameChanged}
          />
          {/* ... other inputs ... */}
          <Button type="submit">Create</Button>
        </Form>
        <Alert>{errorMessage}</Alert>
      </Modal>
    );
  }
}

UserManagementPage-v3.js

import autobind from 'autobind-decorator';
import React from 'react';
import { inject, observer } from 'mobx-react';

import CreateUserModal from './CreateUserModal';

@inject('appStore')
@observer
export default class UserManagementPage extends React.Component {
  @autobind
  onCreateUserModalSubmitted(user) {
    this.props.appStore.createUser(user);
  }

  @autobind
  onCreateUserModalClosed() {
    this.props.appStore.closeCreateUserModal();
  }

  render() {
    const { appStore } = this.props;

    return (
      <div id="user-management-page">
        <Button onClick={appStore.openCreateUserModal}>Create User</Button>
        <CreateUserModal
          isOpen={appStore.isCreateUserModalOpen}
          isLoading={appStore.isCreateUserModalLoading}
          errorMessage={appStore.createUserModalErrorMessage}
          context="user_management"
          onSubmit={this.onCreateUserModalSubmitted}
          onClose={this.onCreateUserModalClosed}
        />
        {/* ... */}
      </div>
    );
  }
}