https://medium.com/@srph/react-effectively-composing-uncontrolled-and-controlled-components-9e6659f92b84

AssignedMembersWidget.js

import React, {Component} from 'react';

export default class AssignedMembersWidget extends Component {
  state = {
    // List of users to select from
    selection: [],
    fetching: false
  }

  componentDidMount() {
    // Fetch selection...
    // Reacted for example purposes.
  }

  render() {
    return (
      // Redacted for example purposes only. Assume we have:
      // - A loader here
      //   {this.props.fetching && <Loader />}
      // - An error alert
      //   {this.props.error && <Alert>{this.props.error}</Alert}
      // - A button to open or close popover
      //   {<button onClick={this.onTogglePopover}>Open Popover</button>}
      // - A popover to choose users from (to assign them)
      //   <Popover onClickMember={this.onAssignMember} />
      // A list of existing users (and as well the way to unassign them)
      //   {this.props.user.map(user => <User user={user} onClickMember={this.onUnassignMember} />)}
    );
  }

  //
  // Other handlers...
  // Reacted for example purposes.
  //

  onAssignMember = (user) => {
    const users = [...this.props.users, user];
    this.props.onAssignMember(users, user);
  }

  onUnassignMember = (id) => {
    // Redacted for example purposes.
  }
}

AsyncAssignedMembersWidget.js

import React, {Component} from 'react'
import AssignedMembersWidget from './AssignedMembersWidget';

export default class AsyncAssignedMembersWidget extends Component {
  state = {
    error: '',
    loading: false
  }

  render() {
    return <AssignedMembersWidget users={this.props.users}
      error={this.state.error}
      loading={this.state.loading}
      onAssignMember={this.onAssignMember}
      onUnassignMember={this.onUnassignMember} />
  }

  onAssignMember = (users, user) => {
    this.setState({
      error: '',
      loading: true
    })

    fetch('/api/issues/:id/assign', { method: 'POST', id: user.id })
      .then(res => {
        this.props.onAssignMember(users, user)
        this.setState({ loading: false })
      }, err => {
        this.setState({
          loading: false,
          error: err
        })
      })
  }

  onUnassignMember = (user) => {
    // Redacted for example purposes.
  }
}