Prototype Model with React

Starting point for creating JSFiddles with React.

by WILLIAM CORREA

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

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

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

  handleSubmit(event) {
    event.preventDefault();
    window.alert(JSON.stringify(this.record))
  }

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

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