How to pass some data to custom control in JSON form

General
1

Hello, I have written my one renderer, i want to pass some data to my renderer.

 const renderers = [
    ...materialRenderers,
    { tester: superConceptPathTester, renderer: BaseConceptControl }
  ];


interface BaseConcpetControlProps {
  data: any;
  filteredResources:TreeNode;
  handleChange(path: string, value: any): void;
  path: string;
}

const BaseConceptControl = ({ data, handleChange,path,filteredResources }: BaseConcpetControlProps) => (
  <BaseConcept
    value={data}
    filteredResources={filteredResources}
    updateValue={(newValue: string) => handleChange(path, newValue)}
  />
);

export default withJsonFormsControlProps(BaseConceptControl);
2

Hi @dijadhav, can you elaborate a bit on the problem you want to solve? I assume that the passing of data to your renderer works.

If you want to pass some props from outside of JSON Forms to your renderer the easiest way is to create your own React context and consume it within your renderer. Using this approach you can pass arbitrary data and callbacks to all of your JSON Forms customizations.

If you have that use case multiple times you could think of writing your own HOC and replace or combine it with withJsonFormsControlProps so that the renderer code itself is independent from your prop source.

3

Yes , Passing data is working fine. I want to pass more fields to my custom renderer.
I have written custom rendered named BaseConceptControl. By default it accept 3 properties data, handleChange and path, I want to pass filteredResources also to BaseConceptControl.

How to pass it?

4

Hi @dijadhav, as mentioned above I would recommend using a React context approach. You would then not define filteredResources as a prop but consume it from your context.