React components to render two kinds of form elements
I think I have an understanding of what you are trying to do, but because select has children and and input does not it's a little tricky but this is what I came up with:

import React, { Component } from 'react'
import { render } from 'react-dom'

class FloatingLabel extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;this.props.render option='Hello'  /&gt;
      &lt;/div&gt;
    )
  }
}

class SelectDropDown extends Component {
  render() {
    return (
      &lt;select&gt;
        &lt;option&gt;{this.props.option}&lt;/option&gt;
      &lt;/select&gt;
    )
  }
}

class InputDropDown extends Component {
  render() {
    return (
      &lt;input /&gt;
    )
  }
}


render(&lt;FloatingLabel render={SelectDropDown} /&gt;, document.querySelector('#root'))


In this example you can create a &lt;FloatingLabel /&gt; component that can either take a SelectDropDown or a InputDropDown component as a prop. You can then render that prop in the FloatingLabel parent and pass whatever props that you need to pass down to the children.

Basically what you would be changing is the everything inside the div except for the label.