Mui responsive layout

General
1

somehow or other, I’ve managed to create a custom layout that is laying out my form fields in a responsive way. It works (code is below (layout hardcoded for now)).

My question is (a) am I doing this the right way and (b) I’m looping through MaterialLayoutRenderer with each element in order for it to work. Seems a bit of a kludge - but again, it works. Would appreciate your thoughts…

const MyGroupRenderer = (props) => {
    const { uischema, schema, path, visible, renderers } = props;

    const layoutProps = {
        elements: uischema.elements,
        schema: schema,
        path: path,
        direction: "column",
        visible: visible,
        uischema: uischema,
        renderers: renderers,
    };

    if (!layoutProps.elements?.length) {
        return <>Hello</>;
    }
    const gridColumns = { lg: 2, xs: 4 };
    return (
        <Card style={{ color: "green" }}>
            <CardHeader title={"KKK"} />

            <CardContent>
                <Grid container spacing={{ xs: 1, md: 2 }}>
                    {Array.from(layoutProps.elements).map((item, index) => (
                        <Grid {...gridColumns} key={index}>
                            <MaterialLayoutRenderer
                                {...props}
                                visible={visible}
                                enabled={true}
                                elements={[layoutProps.elements[index]]}
                            />
                        </Grid>
                    ))}
                </Grid>
                {/* <MaterialLayoutRenderer {...props} visible={visible} enabled={true} elements={layoutProps.elements} /> */}
            </CardContent>
        </Card>
    );
};
2

Hi @skavanm,

For dispatching single elements you should use the DispatchRenderer, see here for an example.