Receiving Empty Data with Custom MaterialOneOfRadioGroupControl in JSONForms

General
1

Hello,

I’m working with the Material renderer and have created a custom renderer called MaterialOneOfRadioGroupControl. However, I’m encountering an issue where props.data always returns empty despite the component rendering without errors.

Here’s the code for my custom renderer:

import { Box } from "@mui/material";
import React from "react";
import {
  and,
  ControlProps,
  isOneOfEnumControl,
  optionIs,
  OwnPropsOfEnum,
  RankedTester,
  rankWith,
} from "@jsonforms/core";
import { useJsonForms, withJsonFormsOneOfEnumProps } from "@jsonforms/react";

export const MaterialOneOfRadioGroupControl = (
  props: ControlProps & OwnPropsOfEnum,
) => {
  const { core } = useJsonForms();
  console.log("core ==>", core.data);
  console.log("MaterialOneOfRadioGroupControl props ==>", props);
  console.log("MaterialOneOfRadioGroupControl data ==>", props.data);
  return <Box>MaterialOneOfRadioGroupControl</Box>;
};

export const materialOneOfRadioGroupControlTester: RankedTester = rankWith(
  22,
  and(isOneOfEnumControl, optionIs("format", "radio")),
);

export default withJsonFormsOneOfEnumProps(MaterialOneOfRadioGroupControl);

For registering this custom renderer, I’m using the following configuration:

const customRenderers = [
  ...materialRenderers,
  { tester: materialVerticalLayoutTester, renderer: MaterialVerticalLayout },
  {
    tester: materialOneOfRadioGroupControlTester,
    renderer: MaterialOneOfRadioGroupControl,
  },
];

When I remove the MaterialOneOfRadioGroupControl and use the default, the data shows.

Could someone help me identify why props.data returns empty? Am I missing something in the configuration, or is there a specific step to ensure the data is passed correctly?

Any guidance or suggestions would be greatly appreciated.

2

Hi @gr8pathik ,

How are you importing the MaterialOneOfRadioGroupControl in the file where you define customRenderers?

It is important that you get the default export, e.g. via import MaterialOneOfRadioGroupControl from ./renderer.ts. If you directly import the renderer without the wrappers, the data is not handed in (e.g. by doing import { MaterialOneOfRadioGroupControl } from ./renderer.ts)

2 Likes
3

Thanks for correcting my silly mistake.

1 Like