Initial state for field array

[GTOsss]

I implemented the wizard form in 2 steps.
At the first step, sections are created.
In the second step, sub sections are added to these sections.

I tried to combine the state of the first page and the second and got a lot of problems:

1. after submitting the 2nd page, incorrect data is added to the shared state (the section name and id are lost).
2. when deleting the first element on page 1, the second page refers to the deleted element by index and loses its validity. As I understand it, this is due to the fact that submit 2nd page deletes the id.

To solve the problem, userform must accept intiailValues with id and other unused fields. The same data must be sent to submit.

https://codesandbox.io/s/react-hook-form-errormessage-uikjg?file=/src/index.js

[bluebill1049]

1. not very clear on the problem and steps to reproduce
2. took a quick look, are you store the submitted data in your local/global state? when you toggle the form, all inputs get unregistered and data will be lost. react hook form embrace native form, just like how you build your form in vanilla JS and state live inside your inputs.

[GTOsss]

In the example I gave, how do I link the data on the first page to the data on the second page?

[bluebill1049]

You can host your data in a local/global state as I suggested above. you can watch this quick tutorial as well: https://www.youtube.com/watch?v=CeAkxVwsyMU

[GTOsss]

Yes, I do. This is exactly what I do in my codSanbox example. But there is a problem when trying to pass initial values to the second page.

In my example, the data on the second page depends on the data on the first page.

[GTOsss]

The example in the video is clear and simple.
But in my example, there is a dependency between 2 pages.

[bluebill1049]

I don't see difference tho, you can host your data in a global store which connected two pages and if your initial data come async you can use reset() at useEffect.

[GTOsss]

The difference is that when the object has unrelated data. We can easily margim of using:

 {...page1, ...page2}

But if you look closely at what is happening in the example, you will understand that not everything is so simple.

[bluebill1049]

The difference is that when the object has unrelated data. We can easily margim of using:

 {...page1, ...page2}

But if you look closely at what is happening in the example, you will understand that not everything is so simple.

I understand everything is not simple and what's why I build this lib to make the thing easier, so back to the square one: what's the issue with the API which lead to your problem? I don't have time to analyze each users' implementation, as I suggested above what are the steps to reproduce the problem.