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 = {
    selection: [],
    fetching: false,
    error: '',
    loading: 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...
  //

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

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

      return
    }

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

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