Using App Dir layouts for multi step forms
Unanswered
Indian oil sardine posted this in #help-forum
Indian oil sardineOP
Hi, so i'm trying to replicate the Airbnb host form in Next. This form has a navbar and header that are constantly rendered and several pages dedicated to steps. I guess my question is, what would be a good way to go about creating the navigation for it? I used to have this long complex wizard hook which use react-hook-form and could take in a large zod schema and validate each step, but it was a pain to maintain and it wasn't easy to just resume where you last left off. Anyways I have this so far but it's terrible, it gets stuck after 4 pages. I'm doubting if this was the right direction.
2 Replies
Madeiran sardinella
It can be refactored, maybe split business logic and presentation logic with a custom hook and implement a reducer.
Chinese perch
Hmm, I'm here with a similar issue, looking into architecting multi-part forms like this. In your case, I would personally keep form state in a parent component and render presentation in a series of child components, one per form page. I've really like using react-hook-form for this, but you could use any setup. Just keep state in the parent and pass values and setter functions down to the child components. Then sync with the database as they progress through the form. --Or-- make each one of the form pages it's own /page.tsx with a shared layout that displays the steps of the process and current location based on the url. Simpler the better imo, if client state is causing you grief just make a series of simple forms that behave like a big complex form.