React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const data = [{
        "type": "text",
        "name": "FirstName",                    
        "classname": "text",
        "placeholder": "Enter first name"
    },
    {
        "type": "text",
        "name": "Surname",                  
        "classname": "text",
        "placeholder": "Enter surname"
    }
 ]

class InputText extends React.Component {

  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue() {
    console.log('');
  }

  render() {
   const { type, name, classname, placeholder } = this.props.params;
    return (
      <div className={classname}>
        <label htmlFor={name}>Test</label>
        <input
          onChange={this.changeValue}
          name={name}
          type={type}
          placeholder={placeholder}
        />
      </div>
    );
  }
}

class Main extends React.Component {
  render() {
    return data.map((input, i) => {
      return <InputText key={i} params={input} />
    });
  }
}

ReactDOM.render(
  <Main />,
  document.getElementById('container')
);