How to register a field at specific position or at the position from where it unregistered?

[ArchanaSharma95]

Hi, I'm working with a form where one field depends on another. If field1 is enabled then I need to hide the field2. Now the problem is I am using "unregister" to hide "field2" when "field1" is enabled and then again register the "field2" when "field1" will again turn to enable.
What happened here::
My form object default values::
{
field0:"",
field1: false,
field2: false,
field3: "",
field4: ""
}

After unregister: I have turned "field1" to true and then unregister the "field2"
{
field0:"",
field1: true,
field3: "",
field4: ""
}

After register: I have turned "field1" to false and again register the "field2"
{
field0:"",
field1: false,
field3: "",
field4: "",
field2: false
}

WHAT I expect after turning "field1" to false(after first enable and then disable):
{
field0:"",
field1: false,
field2: false, // Need field2 at its position from where we have unregister it
field3: "",
field4: ""
}

Is this possible using this form? Please help!

[leapful]

@ArchanaSharma95

Could you please explain why you need to keep order of form field values ? The form values can be in any order as it just a data source, order of field should be handled in UI a.k.a presentation layer.

[ArchanaSharma95]

I am working with UI Builder where I need to build some sections using predefined elements. To render the elements I have not added JSX in any predefined order. I have created a function for each element and depending upon the object created by the form I'm adding a loop of the form object and displaying each element(UI from a separate function) by using the key mentioned in the form.

[ArchanaSharma95]

The reason is I am having 200 +. section where I am using the same type of UI depending on the element setting eg: checkbox, switch, input field, number field, dropdown, colour picker etc. So instead of writing JSX every time for element setting fields I have created a dynamic function with the and added a JSX by using a loop of data saved in a form.
Now, I'm dependent on a sequence of form data to render my elements and here it is not possible for me to write JSX in predefined order because I am having 200 + type settings sections that's why it is not fruitful for me.

[leapful]

@ArchanaSharma95

Javascript Object does not ensure field order, even if react-hook-form or any other library can try to keep the order of form field inside an object, there is always a potential issue where order is wrong in real life use case and causes a really hard to debug problem.

Details: https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order

I would suggest to build a schema UI to maintain the order then use it to map with field object in react-hook-form.

For example:

const schemaUI = ['field1', 'field2', 'field3'];

// Inside your component
schemaUI.map((key) => {
    const value = formValues[key];
    return <SomeComponent value={value} />;
});

[ArchanaSharma95]

Thanks!! it worked for me 👏