Render

The render prop receives the processed fields from the config and lets you decide how to render them to the user. This could look like this:

<Form
    ...
    render={({ actionProps, fieldProps }) => (
        <>
            <div>
                {fieldProps.fields.email}
                <br />
                {fieldProps.fields.password}
            </div>
            <hr />
            <button
                type="button"
                onClick={() => actionProps.handleActionClick(payload => console.log("onSubmit:", payload), true)}
            >
                Submit
            </button>
        </>
    )}
/>

You get two render properties which are essentially two collection of properties for two different parts of a form.

  • fieldProps: This contain the renderer fields, props for handling collections and some additional stuff

    • fields: An object of rendered fields where the id is the key of the object
    • onCollectionAction: A callback to act on collections, like add a new entry or remove an existing one
    • modifyConfig: Callback to modify the forms configuration
    • data: The current form data
    • interfaceState: The interface state of the form
    • errors: The error object, being used mainly for collection errors
    • asyncData: All the data loaded from the asyncDataLoader function in the config
    • isDirty: A boolean which lets you know if the form has edited, dirty, non saved values
    • focusedField: The currently focused field
    • lastFocusedField: The last focused field
    • dirtyFields: An object which contains keys for all dirty fields. Object props are oldValue and newValue
    • get: Lodash get exposed, so that you can access data from a path: get(data, "profile.username")
    • getConfig: Access a config by it's path, for example for the field with id username inside a group profile: getConfig("profile.username")

  • actionProps:

    • handleActionClick: A callback to process a form action
    • handleUndo: Do an undo. This will revert the data to one saved state before the current one
    • handleRedo: Do a redo. This will revert the undo (of course only if an undo was done)
    • isDisabled: Actions can be disabled, for example if data has to be valid
    • isDirty: A boolean which lets you know if the form has edited, dirty, non saved values
    • focusedField: The currently focused field
    • lastFocusedField: The last focused field
    • dirtyFields: An object which contains keys for all dirty fields. Object props are oldValue and newValue
    • silentlyGetValidationErrors: Silently validate the form without chnaging the error object, just returning them

Read the page about collections and actions to get more details on those two features.

If you use fieldsets, you get the same props on that render function.

Simple Render

Sometimes, in very simple forms, all you want is render the fields. For that usecase, you can use the simplified render prop renderFields like this:

<Form
    ...
    renderFields={fields => (
        <div>
            {fields.myField}
        </div>
    )}
/>

Here you only get one render prop fields which is an object of all the rendered fields, which you can than layout.