medium_react_pattern_context_form.jsx

export default class Form extends Component {
  // Defining Context Types these are the properties that 
  // the consumer component can use.
  static childContextTypes = {
    onSent: func,
    isDisabled: bool,
  }

  // Providing the actual values for the Context Types 
  // defined in childContextTypes
  getChildContext() {
    const { isDisabled } = this.props;
    return {
      isDisabled: this.state.isDisabled,
      onSent: this.handleOnSent,
    }
  }

  state = {
    isDisabled: false,
  }

  handleOnSent = event => {
    // having the callback in the parent component
    // would allowed you theoretically update the state
    // or process any business logic that you need.
    event.preventDefault();
    this.setState({ isDisabled: true });

    return new Promise((resolve) => {
      setTimeout(() => {
        this.setState({ isDisabled: false });
        resolve(true);
      }, 3000);
    });
  }

  render() {
    return (
      <form className="children-extend-form">
        {this.props.children}
      </form>
    );
  }
}

medium_react_pattern_context_form_class_button.jsx

// Using context in a Class component
export class Button extends Component {
  // Allowing the component to be aware of these 
  // context properties
  static contextTypes = {
    isDisabled: bool,
    onSent: func,
  }

  // Accessing onSent function defined in the Form Component 
  // via this.context.onSent
  handleOnClick = event => this.context
    .onSent(event)
    .then(response => {
      alert('🎉🎉🎉🎉🌮🌮🌮🌮');
    });

  render() {
    return (
      <button disabled={this.context.isDisabled} onClick={this.handleOnClick}>
        Sent
      </button>
    );
  }
}

medium_react_pattern_context_form_stateless_input.jsx

// Statless component can received the context via the second argument
export const Input = (props, context) => {
  return <input type="text" disabled={context.isDisabled} />
}

// Stateless component also can access the context 
// properties as well adding contextTypes
Input.contextTypes = {
  isDisabled: bool,
}