Control Delegation

ControlDelegation.jsx

class Child extends React.Component {
  static defaultProps = {
    type: 'text',
    onChange: () => {},
    value: ''
  }
  render() {
    return <input {...this.props} />;
  }
}

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Initial value'
    };
  }
  handleChange = e => {
    this.setState({
      value: e.target.value
    });
  }
  render() {
    const {children} = this.props;
    const {value} = this.state;

    return <div>
      {React.Children.map(children, child => React.cloneElement(child, {onChange: this.handleChange, value}))}
    </div>;
  }
}

// In this example, <Container /> is going to be in charge of controlling <Child />.
ReactDOM.render(
  <Container>
    <Child />
  </Container>,
  document.getElementById('controlled-by-parent')
);

// In this example, <Container /> should stop controlling the <Child />
// (ideally by the virtue of <Child />'s props overriding props specified in <Container />'s `render` method).
// Crap implementation would be React.cloneElement(child, {onChange: this.handleChange, value, ...child.props});
// but that doesn't allow for the `controlled-by-parent` scenario working when `defaultProps` are present
// and is probably v. unidiomatic.
// Any ideas on how to make it work?
ReactDOM.render(
  <Container>
    <Child value={someValue} onChange={someHandler} />
  </Container>,
  document.getElementById('controlled-from-outside')
);