React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by WILLIAM CORREA

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://reactjs.org/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.schemas = [
    	{
      	component: 'input',
        field: 'name',
        label: 'Name'
      },
    	{
      	component: 'textarea',
        field: 'description',
        label: 'Description'
      }
    ]
    this.record = {
    	name: '',
      description: ''
    };
  }
  
  renderElements() {
  	return this.schemas.map(schema => {
    	return <div>
      	<label>{schema.label}</label>
      	<schema.component key={schema.field} type="text"
        onChange={this.handleChange.bind(this, schema.field)}
        />
      </div>
    })
  }

  handleChange(field, event) {
     this.record[field] = event.target.value;
  }

  handleSubmit(event) {
    console.log('~> record', this.record)
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          {this.renderElements()}
          <hr/>
          <input type="submit" value="Submit" />
      </form>
    );
  }
}

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