Custom Fields React

var React = require('react');
var ReactDOM = require('react-dom');
var Formio = require('react-formio');

require('react-widgets/dist/css/react-widgets.css');
require('react-formio/formio.css');

var formChange = function(submission, key, value) {
  console.log('change', submission.data, key, value);
}

var formSubmit = function(submission) {
  console.log('submit', submission.data);
}

var form = require('./forms/alerts.json');

// Tnis is the data pulled from a data source about the person.
var personData = {
  hasDiabetes: "yes",
  subAlerts: [
    {
      type: 'radio',
      question: 'Is it a laden swallow?',
      key: 'laden'
    },
    {
      type: 'radio',
      question: 'Is it an African swallow?',
      key: 'african'
    },
    {
      type: 'checkbox',
      question: 'Is it carrying a coconut',
      key: 'coconut'
    },
    {
      type: 'textfield',
      question: 'What is the average speed of a swallow?',
      key: 'speed'
    }
  ]
};

var data = {
  hasDiabetes: personData.hasDiabetes
};

// Fill in the sub alerts into the form dynamically.
personData.subAlerts.forEach(function(subAlert) {
  var component = {};

  switch (subAlert.type) {
    case 'checkbox':
      component = {
        type: "checkbox",
        inputType: "checkbox",
        label: subAlert.question,
        key: subAlert.key,
        input: true,
        validate: {
          required: false
        }
      };
      break;
    case 'radio':
      component = {
        type: "radio",
        inputType: "radio",
        label: subAlert.question,
        key: subAlert.key,
        values: [
          {
            value: "yes",
            label: "Yes"
          },
          {
            value: "no",
            label: "No"
          }
        ],
        inline: true,
        input: true
      };
      break;
    case 'textfield':
      component = {
        type: "textfield",
        inputType: "text",
        label: subAlert.question,
        key: subAlert.key,
        input: true
      };
      break;
  }
  form.components[2].components.push(component);
});


ReactDOM.render(
  <Formio form={form} submission={{data: data }} onChange={formChange} onFormSubmit={formSubmit}></Formio>, document.getElementById('formio')
);