Formik

SketchSystems.spec

Formik
  IDLE*
    setFieldValue -> VALIDATING
    setValues -> VALIDATING
    setTouched -> VALIDATING
    setFieldTouched -> VALIDATING
    handleChange -> VALIDATING
    handleBlur -> VALIDATING
    handleSubmit -> Submit Attempted
    submitForm -> Submit Attempted
    validateForm -> VALIDATING
    validateField -> VALIDATING
    setSubmitting true -> SUBMITTING
    setSubmitting false -> IDLE
    handleReset -> IDLE
    resetForm -> IDLE
  VALIDATING
    Submit Attempted
      has errors -> IDLE
      no errors -> SUBMITTING
    Not Attempting Submit*
      has errors -> IDLE
      no errors -> IDLE
  
  SUBMITTING
    setSubmitting false -> IDLE

       

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}