Dynamic Fields

Sometimes you need to create your Form out of dynamic data, e.g. from data you received from a server. This is mostly the case when using checkboxes, radio groups, or select fields.

For example: you could receive the data from the server and than use setState to set the data for your checkboxes, radio groups, and select fields used in your <Form /> component.

async componentDidMount() {
  const response = await getDataFromServer();
  this.setState({
    checkboxData: response.data.checkboxData,
    selectData: response.data.selectData,
    radioData: response.data.radioData,
  });
}

Than in your render function you would return something like:

<Form>
  <div>
    {checkboxData.map(checkbox => (
      <React.Fragment>
        <div>{checkbox.name}</div>
        <Field id={checkbox.id} type="checkbox" />
      </React.Fragment>
    ))}
  </div>
  <div>
    <Select type="select" id="select">
      <option disabled value="">
        --- Select an option ---
      </option>
      {selectData.map(selectOption => (
        <option value={selectOption.value}>{selectOption.name}</option>
      ))}
    </Select>
  </div>
  <div>
    <RadioGroup type="radio" id="radioID">
      {radioData.map(radioOption => (
        <div>
          <div>{radioOption.name}</div>
          <input type="radio" name="radioID" id={radioOption.id} />
        </div>
      ))}
    </RadioGroup>
  </div>
  <div>
    <Button
      type="submit"
      id="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form><Form>
  <div>
    {checkboxData.map(checkbox => (
      <React.Fragment>
        <div>{checkbox.name}</div>
        <Field id={checkbox.id} type="checkbox" />
      </React.Fragment>
    ))}
  </div>
  <div>
    <Select type="select" id="select">
      <option disabled value="">
        --- Select an option ---
      </option>
      {selectData.map(selectOption => (
        <option value={selectOption.value}>{selectOption.name}</option>
      ))}
    </Select>
  </div>
  <div>
    <RadioGroup type="radio" id="radioID">
      {radioData.map(radioOption => (
        <div>
          <div>{radioOption.name}</div>
          <input type="radio" name="radioID" id={radioOption.id} />
        </div>
      ))}
    </RadioGroup>
  </div>
  <div>
    <Button
      type="submit"
      id="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form>