JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>

<div id="formio"></div>

JavaScript

const el = document.getElementById("formio");
const formCreatePromise = Formio.createForm(el, {
  display: "form",
  components: [{
    "label": "Name",
    "applyMaskOn": "change",
    "tableView": true,
    "validateWhenHidden": false,
    "key": "name",
    "type": "textfield",
    "input": true
  }]
});
const fetchPromise = fetch('https://swapi.dev/api/people/1').then((res) => res.json());

Promise.all([formCreatePromise, fetchPromise]).then(([form, apiData]) => {
  console.log(apiData);
  if (apiData.height) {
    const heightComponent = {
      type: "textfield",
      key: "height",
      label: "Height",
      input: true
    };
    form.component.components.push(heightComponent);
    form.rebuild();
    form.submission = {
      data: {
        name: apiData.name,
        height: apiData.height
      }
    }
  }

});