medium_react_pattern_children_extend.jsx

export default class Form extends Component {
  canIDoSomething = () => {
    return Promise.resolve(true)
  }

  render() {

    const extendedProps = {
      isFormDisabled: this.props.isDisabled,
      canIDoSomething: this.canIDoSomething,
    };
    // this is a React utility to map over the component's children and 
    // allows us to clone and extend the Form’s children
    const children = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child, extendedProps);
    });

    return (
      <form>
        {children}
      </form>
    );
  }
}

export const Input = (props) => {
  return <input type="text" disabled={props.isFormDisabled} />
}

export const Button = (props) => {
  const doSomething = () => {
    props.canIDoSomething().then(response => alert(response))
  }

  return (
    <button
      disabled={props.isFormDisabled}
      onClick={doSomething}
    >
      go
    </button>
  )
}

medium_react_pattern_children_extend_how_to_use_it.jsx

<Form>
  <Input />
  <Button />
</Form>

{ 
  // will extend its children with the prop isDisabled so 
  // internally each child will have access to it 
}
<Form isDisabled> 
  <Input />
  <Button />
</Form>