RenderPropExample.ts

// Declare and name FormField instances containing the state of form fields.
const fields = {
  name: new FormField(),
  age: new FormField(),
  description: new FormField()
};

// Render a Form component, which automates the presentation of these fields.
// Internally it analyzes the type of each field and chooses the proper control component to render per field.
// Optionally it allows for a "render prop" to be specified to give a customized layout for the internally rendered fields.
const formElement = (
  <Form fields={fields}>
    {(renderedFields, defaultFieldRenderer) => {
      // Select two fields of interest: name and age, but put the rest in an object.
      const {name, age, ...rest} = renderedFields;
      return (
        <React.Fragment>
          {/* Position "name" and "age" fields horizontally */}
          <Row>
            {name}
            {age}
          </Row>
          {/* Render the remaining fields vertically (the default) */}
          {defaultFieldRenderer(rest)}
        </React.Fragment>
      )
    }}
  </Form>
)