# Problem with basic MaterialEnumControl example

**URL:** <https://jsonforms.discourse.group/t/problem-with-basic-materialenumcontrol-example/1382>\
**Category:** General\
**Created:** [March 10, 2023, 11:33pm UTC](https://jsonforms.discourse.group/t/problem-with-basic-materialenumcontrol-example/1382 "2023-03-10T23:33:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cjauvin](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/cjauvin/32/673_2.png) [@cjauvin](https://jsonforms.discourse.group/u/cjauvin)\
**Post date:** [March 10, 2023, 11:33pm UTC](https://jsonforms.discourse.group/t/problem-with-basic-materialenumcontrol-example/1382/1 "2023-03-10T23:33:16Z")

</div>

Hi! I’m completely new to JSONForms, and I’m trying to understand how I could implement a “dynamic dropdown”, i.e. a dropdown whose value set is determined by the value of another dropdown.

My approach so far has been to try to adapt this example [Custom Renderers - JSON Forms](https://jsonforms.io/docs/tutorial/custom-renderers#reusing-existing-controls), (which uses a `MaterialBooleanControl`, along with the `react-seed-app`) into one that is based on a `MaterialEnumControl`, in the hope of better understanding how it works.

My test component looks like this so far (note that I had to add some dummy props that I do not fully understand yet, to satisfy TypeScript):

```auto
import {
  ControlProps,
  OwnPropsOfEnum,
  RankedTester,
  rankWith,
  scopeEndsWith,
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';
import { Unwrapped } from '@jsonforms/material-renderers';
import { Grid, Typography } from '@mui/material';
const { MaterialEnumControl } = Unwrapped;

export const linkedDropdownControl = (props: ControlProps & OwnPropsOfEnum) => {
  console.log(props);
  return (
    <Grid>
      <Typography>Bla bla bla</Typography>
      <MaterialEnumControl
        {...props}
        label='Test'
        // path={'bla'}
        errors={''}
        t={() => 'toto'}
        locale='en'
        options={[
          { label: 'AA', value: 'AA' },
          { label: 'BB', value: 'BB' },
        ]}
        data={'AA'}
      />
    </Grid>
  );
};

export const linkedDropdownTester: RankedTester = rankWith(
  3,
  scopeEndsWith('dynamic_dropdown')
);

export default withJsonFormsControlProps(linkedDropdownControl);

```

I also added a corresponding entry in `schema.json`:

```auto
"dynamic_dropdown": {
  "type": "string",
  "enum": ["AA", "BB"]
}

```

and in `uischema.json`:

```auto
{
  "type": "Control",
  "scope": "#/properties/dynamic_dropdown"
}

```

I also registered my custom renderer and tester with my `<JsonForms>`. It seems to “work” (when I change the tester condition I can fall back to the custom enum renderer), but the problem is that I cannot see any MUI input being rendered (just the `<Typography>` is visible).

I’m quite certain it’s just missing something quite stupid, but I searched a lot, and cannot find any more clues… any help would be much appreciated!

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [March 13, 2023, 11:28am UTC](https://jsonforms.discourse.group/t/problem-with-basic-materialenumcontrol-example/1382/2 "2023-03-13T11:28:11Z")

</div>

Hello @cjauvin ,  
based on you description I agree that the tester seems to work fine.

In your custom control, I noticed that you just wrap your control in HOC `withJsonFormsControlProps`. This does not provide all properties expected for enum controls. This also explains why you had to provided some ‘dummy’ props like `t`.  
You can have a look at [MaterialEnumControl.tsx](https://github.com/eclipsesource/jsonforms/blob/2bbc64689cdf694daacac7ff5c1f5de6eb540849/packages/material-renderers/src/controls/MaterialEnumControl.tsx#L62) to see the HOC used for enum controls.  
Keep in mind that you also need to adapt you control’s prop types when you adapt the HOC.

I hope that helps,  
Lucas

---

<div class="post-metadata">

**Author:** ![cjauvin](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/cjauvin/32/673_2.png) [@cjauvin](https://jsonforms.discourse.group/u/cjauvin)\
**Post date:** [March 13, 2023, 2:30pm UTC](https://jsonforms.discourse.group/t/problem-with-basic-materialenumcontrol-example/1382/3 "2023-03-13T14:30:55Z")

</div>

Thanks a lot @lucas-koehler for your answer. Yes I have noticed that I wasn’t using the right HOC, as is specified in the docs: I changed it to `withJsonFormsEnumProps`. I was also missing a `visible=true` props apparently.