apply suggestions from code review 2

Author: LukasBoll

content/docs/tutorial/dynamic-enum.mdx

@@ -68,7 +68,7 @@ const url = schema['x-url'];
 #### Initializing the React Context
 
 Now that we have access to the API URL, we can use React Context to make this data available across our renderers.
-React Context allows you to share data deep in the component tree to access data without needing to pass additional properties through the component hierarchy.
+[React Context](https://react.dev/learn/passing-data-deeply-with-context) allows you to share data deep in the component tree to access data without needing to pass additional properties through the component hierarchy.
 To set up the React Context for your API service, create it in your application as follows:
 
 ```js
@@ -127,7 +127,7 @@ type JsonSchemaWithDependenciesAndEndpoint = JsonSchema & {
   dependent: string[];
   endpoint: string;
 };
-export const Country = (
+const CountryControl = (
   props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps
 ) => {
 ...
@@ -193,6 +193,11 @@ const CountryControl = (
     />
   );
 };
+
+export default withJsonFormsEnumProps(
+  withTranslateProps(React.memo(CountryControl)),
+  false
+);
 ```
 
 Now all that´s left to do is to [create a tester](./custom-renderers#2-create-a-tester) and [register](./custom-renderers#3-register-the-renderer) the new custom renderer in our application.
@@ -214,7 +219,7 @@ type JsonSchemaWithDependenciesAndEndpont = JsonSchema & {
   endpoint: string;
 };
 
-export const Region = (
+const RegionControl = (
   props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps
 ) => {
   const schema = props.schema as JsonSchemaWithDependenciesAndEndpont;
@@ -254,5 +259,10 @@ export const Region = (
     />
   );
 };
+
+export default withJsonFormsEnumProps(
+  withTranslateProps(React.memo(RegionControl)),
+  false
+);
 ```
 Again we need to create a [create a tester](./custom-renderers#2-create-a-tester) and [register](./custom-renderers#3-register-the-renderer) the new custom renderer.

src/components/common/api.ts src/components/common/api.jssrc/components/common/api.ts renamed to src/components/common/api.js

@@ -1,11 +1,11 @@
 export class API {
-  private url: string;
+  url;
 
-  constructor(url: string) {
+  constructor(url) {
     this.url = url;
   }
 
-  async get(endpoint: string): Promise<string[]> {
+  async get(endpoint){
     switch (this.url + '/' + endpoint) {
       case 'www.api.com/regions/Germany':
         return germanStates;

src/components/common/country/Country.tsx …ponents/common/country/CountryControl.jssrc/components/common/country/Country.tsx renamed to src/components/common/country/CountryControl.js src/components/common/country/Country.tsx renamed to src/components/common/country/CountryControl.js

@@ -1,28 +1,23 @@
 import React, { useEffect } from 'react';
 import { useState } from 'react';
-import { ControlProps, JsonSchema, OwnPropsOfEnum } from '@jsonforms/core';
-import { TranslateProps } from '@jsonforms/react';
+import { withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
 import { CircularProgress } from '@mui/material';
-import { Unwrapped, WithOptionLabel } from '@jsonforms/material-renderers';
+import { Unwrapped } from '@jsonforms/material-renderers';
 import { APIContext } from '../../docs/tutorials/dynamic-enum';
 
 const { MaterialEnumControl } = Unwrapped;
 
-type JsonSchemaWithDependenciesAndEndpoint = JsonSchema & {
-  dependent: string[];
-  endpoint: string;
-};
 
-export const Country = (
-  props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps
+const CountryControl = (
+  props
 ) => {
   const { handleChange } = props;
-  const [options, setOptions] = useState<string[]>([]);
+  const [options, setOptions] = useState([]);
   const api = React.useContext(APIContext);
-  const schema = props.schema as JsonSchemaWithDependenciesAndEndpoint;
+  const schema = props.schema ;
 
   const endponit = schema.endpoint;
-  const dependent: string[] = schema.dependent ? schema.dependent : [];
+  const dependent = schema.dependent ? schema.dependent : [];
 
   useEffect(() => {
     setOptions([]);
@@ -38,7 +33,7 @@ export const Country = (
   return (
     <MaterialEnumControl
       {...props}
-      handleChange={(path: string, value: any) => {
+      handleChange={(path, value) => {
         handleChange(path, value);
         dependent.forEach((path) => {
           handleChange(path, undefined);
@@ -49,4 +44,9 @@ export const Country = (
       })}
     />
   );
-};
+};
+
+export default withJsonFormsEnumProps(
+  withTranslateProps(React.memo(CountryControl)),
+  false
+);

src/components/common/country/CountryControl.tsx

@@ -1,29 +1,23 @@
 import React from 'react';
 import { useState } from 'react';
-import { ControlProps, JsonSchema, OwnPropsOfEnum } from '@jsonforms/core';
-import { TranslateProps, useJsonForms } from '@jsonforms/react';
+import { useJsonForms, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
 import { CircularProgress } from '@mui/material';
-import { Unwrapped, WithOptionLabel } from '@jsonforms/material-renderers';
+import { Unwrapped } from '@jsonforms/material-renderers';
 import { APIContext } from '../../docs/tutorials/dynamic-enum';
 const { MaterialEnumControl } = Unwrapped;
 
-type JsonSchemaWithDependenciesAndEndpont = JsonSchema & {
-  dependent: string[];
-  endpoint: string;
-};
-
-export const Region = (
-  props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps
+const RegionControl = (
+  props
 ) => {
-  const schema = props.schema as JsonSchemaWithDependenciesAndEndpont;
+  const schema = props.schema;
   const { handleChange } = props;
-  const [options, setOptions] = useState<string[]>([]);
+  const [options, setOptions] = useState([]);
   const api = React.useContext(APIContext);
   const country = useJsonForms().core?.data.country;
-  const [previousCountry, setPreviousCountry] = useState<String>();
+  const [previousCountry, setPreviousCountry] = useState();
 
   const endponit = schema.endpoint;
-  const dependent: string[] = schema.dependent ? schema.dependent : [];
+  const dependent = schema.dependent ? schema.dependent : [];
 
   if (previousCountry !== country) {
     setOptions([]);
@@ -40,7 +34,7 @@ export const Region = (
   return (
     <MaterialEnumControl
       {...props}
-      handleChange={(path: string, value: any) => {
+      handleChange={(path, value) => {
         handleChange(path, value);
         dependent.forEach((path) => {
           handleChange(path, undefined);
@@ -51,4 +45,9 @@ export const Region = (
       })}
     />
   );
-};
+};
+
+export default withJsonFormsEnumProps(
+  withTranslateProps(React.memo(RegionControl)),
+  false
+);