combinedReactRenderPropAndControlledComponent.js

class ComponentThatsGenerateAValue extends Component {
  state = {
    value: initialState
  }

  onChange = newState => {
    this.setState({value: newState})
  }

  render() {
    return createElement(
      this.props.component,
      {
        value: this.state.value,
        onChange: this.onChange
      }
    )
  }
}

class ComponentThatRenders extends Component {
  render() {
    return <input value={this.props.value} onChange={evt => this.props.onChange(evt.target.value)} />
  }
}

// or 

const ComponentThatRenders = (props) => {
  return <input value={props.value} onChange={evt => props.onChange(evt.target.value)} />
}

<ComponentThatsGenerateAValue
  component={ComponentThatRenders}
></ComponentThatsGenerateAValue>