how to implement children vnode conditional rendering inside a nested h() function?

[swatchion]

Hello everyone:

Facing a problem which stuck me for nearly a full day.

I have a dynamic modal which content can be varied depending on the user action, which I use h() function to render the modal content.

Now I have a problem when deal with nested form element. Try to describe the situation as flow.

  const _form_field_a_enabled = ref(false);
  const modal_content = h(MyForm, {}, [
            h(FormFieldA, { propEnabled: _form_field_a_enabled.value }), // default false here
            h(FormFieldB), // render FormFieldB and update modal_content when FormFieldA -> propEnabled: true
            h(FormFieldC) // render FormFieldC and update modal_content when FormFieldA -> propEnabled: true
        ]);

As the h() doesn't take a ref() or reactive object as its parameters, approach like the flowing is not going to work.

  const _form_field_a_enabled = ref(false);
  const modal_content = h(MyForm, {}, [
            h(FormFieldA, { propEnabled: _form_field_a_enabled.value, onChange(el){_form_field_a_enabled.value = el.value;} }), // default false here, update _form_field_a_enabled value when user update the field
            _form_field_a_enabled.value ? h(FormFieldB) : null, // render FormFieldB and update modal_content when FormFieldA -> propEnabled: true
             _form_field_a_enabled.value ? h(FormFieldC) : null // render FormFieldC and update modal_content when FormFieldA -> propEnabled: true
        ]);

Any advice to overcome this will be much appreciated! Thanks in advance.

[LinusBorg]

I don't understand what should not work about the second example.

I'm assuming you are running this code in a render function?