Props are undefined in custom renderers

General
1

I have some custom renderers, “CustomMaterialLabelRenderer”, “CustomMaterialListWithDetailRenderer”, there are copies of the OOTB renderers for example:

export const CustomMaterialHorizontalLayoutRenderer = ({
    uischema,
    renderers,
    cells,
    schema,
    path,
    enabled,
    visible,
    config
}: LayoutProps) => {
    const layout = uischema as HorizontalLayout;
    const childProps: MaterialLayoutRendererProps = {
        elements: layout.elements,
        schema,
        path,
        enabled,
        direction: 'row',
        visible,
        renderers: renderers,
        cells: cells
    };
    const appliedUiSchemaOptions = merge({}, config, uischema.options);
    const paddingTop = appliedUiSchemaOptions.paddingTop as ResponsiveStyleValue<React.CSSProperties["paddingTop"]> || undefined;
    const paddingRight = appliedUiSchemaOptions.paddingRight as ResponsiveStyleValue<React.CSSProperties["paddingRight"]> || undefined;
    const paddingBottom = appliedUiSchemaOptions.paddingBottom as ResponsiveStyleValue<React.CSSProperties["paddingBottom"]> || undefined;
    const paddingLeft = appliedUiSchemaOptions.paddingLeft as ResponsiveStyleValue<React.CSSProperties["paddingLeft"]> || undefined;
    const divider = appliedUiSchemaOptions.divider as boolean || undefined;

    return (
        <>
            <Box sx={{
                pt: { paddingTop }, pr: { paddingRight }, pb: { paddingBottom }, pl: { paddingLeft }
            }}>
                <MaterialLayoutRenderer
                    {...childProps}
                    visible={true}
                />
            </Box>
            {divider === true && <Divider sx={{ mt:2 }} />}
        </>
    );
};

export default withJsonFormsLayoutProps(CustomMaterialHorizontalLayoutRenderer);

But the “visible” prop is undefined (hard coded to true in my example).

The same for “CustomMaterialListWithDetailRenderer”, but other props have the issue such as the “required” prop. Am I missing something really obvious here? Should these out of the box props have values passed to them via withJsonFormsLayoutProps and withJsonFormsArrayLayoutProps respectively?

2

Hi @chriswhitehead,

Yes exactly, withJsonFormsLayoutProps and the other off-the-shelf binding utils consume

  • the props handed over by the dispatcher, and
  • the form-wide state

to derive the specialized props for the wrapped renderer.

A likely mistake is registering the CustomMaterialHorizontalLayoutRenderer directly within your custom renderers instead of the default exported wrapped variant.

So wherever you build your renderer set, you should use

import MyCustomRenderer from './CustomRenderer'

instead of

import { CustomMaterialHorizontalLayoutRenderer } from './CustomRenderer'

Of course you could also just not export the CustomMaterialHorizontalLayoutRenderer and name-export the wrapped variant.

3

:sweat_smile:

Awesome, thanks - I blame VS for autocompleting the imports.

1 Like