How can I get the Key of the custom component when it is rendered?

[azrlucky]

Hi Team,

I am trying to make a complex custom component for which I need to get access of the key assigned to the custom component.
eg:
custom component definition:

export const VerifiedByBuilder = define(VerifiedByControl, 'VerifiedBy')
  .name('Verified By')
  .category('Codes')
  .props({
    value: array.valued.default([]),
  });

need access of the key like VerifiedBy 1 in the below custom component

const VerifiedByControl = (props: any) => {
  console.log('VerifiedByControl', props);
  return (
    <div className={props.className}>
      <VerifiedByCode value={props.value} onChange={props.onChange} />
    </div>
  );
};

Is it possible to achieve that and how?

[optimajet]

Hi @azrlucky,

Of course you can. To do this, you need to use the useComponentData hook (https://formengine.io/documentation/api-reference/@react-form-builder/core/functions/useComponentData).

The key property can be found here - https://formengine.io/documentation/api-reference/@react-form-builder/core/classes/ComponentData#key.

const VerifiedByControl = (props: any) => {
  const componentData = useComponentData()
  console.log('componentData', componentData.key);

  console.log('VerifiedByControl', props);
  return (
    <div className={props.className}>
      <VerifiedByCode value={props.value} onChange={props.onChange} />
    </div>
  );
};