Dynamic Component

by omerts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<div id='placeholder'>

</div>

Babel + JSX

const components = ['textarea', 'input', 'select']

class DynamicComponent extends React.Component {  
  render () {
   return (
    <div>
     {components.map(component => {
        const componentElement = React.createElement(component)
        return <div>
          <h3>{component}</h3>
          {componentElement}
        </div>        
      })}
    </div>
   )
	}
 }

ReactDOM.render(<DynamicComponent />, document.getElementById('placeholder'))