Passing props to class based custom widget

[burks10]

Prerequisites

• I have read the documentation

What theme are you using?

material-ui

What is your question?

Hi all! This seems like it should be relatively easy to do, but I've been spinning my wheels for hours. I am trying to set the required prop of a custom widget, but I can't seem to figure out how to do it.

To provide some context, I am trying to generate Forms on the fly by creating several predefined custom widgets. In the future, I will be creating a UI so users can create forms on their own with my library of custom widgets. However, a big feature would be able to set the "required" property of a given widget. :D

I have a system that is basically gathering up all these widgets like so getWidget just returns the widget JSX, and this works fine when I don't supply any props as the parameter. However, I just want to set the required field... is there any easy way to do this?

    getWidgetRegistrations(): RegistryWidgetsType<any, RJSFSchema, any> {
        let widgetRegistrations: RegistryWidgetsType<any, RJSFSchema, any> = {};
        this.widgets.forEach(widget => {
            widgetRegistrations = {
                ...widgetRegistrations, 
                [widget.getSchemaKey()]: widget.getWidget,
            }
        });
        return widgetRegistrations;
    }

This is my simple widget for retrieving a first name

class FirstNameWidget extends AbstractCaptureWidget {

    constructor(options: IOptions) {
        super();
        this.widgetName = 'FirstNameWidget';
        this.schemaKey = this.widgetName + '-' + crypto.randomUUID();
        this.validWidgetOptions = ['label'];
        this.mandatoryWidgetOptions = [];
        this.setWidgetOptions(options, {'label': 'T_first_name'});
    }

    getUISchema(): UiSchema {
        return {
            [this.schemaKey]: {
                "ui:widget": this.schemaKey,
                "ui:options": this.widgetOptions
            }
        }
    }

    getSchema(): { [key: string]: JSONSchema7Definition } {
        return {
            [this.schemaKey]: {
                type: 'string'
            }
        }
    }

    public formDataToBackend(formData: FormData): FormData {
        formData['firstname'] = formData[this.schemaKey];
        delete formData[this.schemaKey];
        return formData;
    }

    getWidget(props: WidgetProps): JSX.Element {
        console.log(props);
        const {
            options,
            value = "",
            required = true
        } = props;

        console.log(required);

        const {
            label = ""
        } = options;

        return (
            <TextField
                id={crypto.randomUUID()} //TODO, use schemaKey?
                label={label}
                variant="filled"
                value={value}
                required={required}
                onChange={(event) => {
                    props.onChange(event.target.value)
                }} />
        );
    }

}
export { FirstNameWidget };