Custom Field Factory

Now things begins to be fun, and closer to the real word! After all, you need to display errors and other thinks that your user needs.

// myFieldFactory.tsx
// ------------------

// Some extra fprops
interface MyFieldFactoryProps {
    fLabel?: string
}

// Your awesome factory, with error displaying, label and requirement showing
function MyFieldFactory<TProps>(field: FieldFactoryArgs<TProps>) {
    return FieldFactory<TProps, MyFieldFactoryProps>((fprops, props, fieldBindings, fielStatus) => 
            <div>
                <div>
                    {fprops.fLabel}
                    {fprops.fRequired && "*"}
                </div>
                <div>
                    {field(fprops, props, fieldBindings, fielStatus)}
                </div>
                <div>
                    {fielStatus.shouldDisplayErrors && fielStatus.errors}
                </div>
            </div>
        )

}

Now, just use your factory on your components!

// componentField.tsx
// --------------

// Use it!
const ComponentField = MyFieldFactory<ComponentProps>((fprops, props, fieldBindings, fielStatus) => 
    <Component {...props} {...fieldBindings} />
)