renderWhen in custom component

[ManaliV]

1. How to add renderWhen property here in custom myButton component where I want to render MyButton based on some other radio button selection
   export const myButton = define(MyButton, 'MyButton')
   .name('My Button')
   .category('Custom')
   .props({
   // button text
   children: string.named('Caption').default('Button'),
   // сallback fired when the button is clicked.
   onClick: event,
   })

[sergeythrees]

Hi, @ManaliV
renderWhen property is added to each component by default.
Did you mean this property in the editor, right?

[ManaliV]

hi ,
No not in editor, I'm creating custom component and I'm hiding property editing window , I have custom radio button when yes is selected I want to render custom text box, I can achieve it using 'renderWhen' in json but do we have any way to achieve it when I create custom text box using define?

What should I write here in renderWhen?

export const MYBuilder = define(MyControl, 'MyTest')
.name('MyTest')
.category('Test')
.props({
value: array.valued.default([]),
renderWhen:

    // "value": "",
    //       "fnSource": "const myData = form.data['Student 1']; const first_grade_student = myData.find(item => item.key === 'first_grade_student').value; return first_grade_student === 'Yes';",
    //       "computeType": "function"
});

[sergeythrees]

@ManaliV

You will not be able to set a value for renderWhen via define.
If you are making a custom component and you are not going to let the user edit the value of the renderWhen function, then it is easier for you to use the condition to display inside the component itself.

You can get the state of the form inside the component as follows:

import {useStore} from '@react-form-builder/core'

const MyComponent = () => {
  const {data} = useStore().form.componentTree;
  const myData = data['Student 1']; 
  const first_grade_student = myData.find(item => item.key === 'first_grade_student').value;
  return <label>first_grade_student</label>
}