How to Build a Multi-Page Form with React Hooks | Multi-Step Tutorial

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

How to Build a Multi-Page Form with React Hooks | Multi-Step Tutorial

(00:00) Intro
(00:16) Welcome
(00:26) Starter Code & Overview
(02:21) Create a Form Context and Provider
(12:21) useFormContext hook
(13:42) Form component
(19:07) Review Pages & Functionality
(22:42) Same As Billing
(24:15) Button display logic & validation
(30:37) Wrap form with FormProvider
(31:46) Check form functionality

📚 Tutorial References:
🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 General React References:

Was this React Multi-Step Form tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #form #multistep

[adityakunwar]

i am very glad i came across your channel i have been learning new tricks from your channel past a year and i still remember the very first thing i saw on your channel was the jwt token auth because the refresh token rotation part as you explained and demonstrated, none had done that and there never was a such deep and dedicated video for it. I sincerely wanna thankyou for that and everything you have been doing for the community.

[nega]

Thanks a lot, you don't know how much you saved me from getting crazy with this and your previous video. I'm really glad i found this, a lot of help, well explained, and guide source code. Keep going!

[kishoreandra]

Woah these real world examples is what makes your channel unique Dave, always something new to learn 🙏

Thanks alot Dave

[bkatsevych]

Thanks a lot for another great tutorial! Your channel is a pure gem!

[joaoarthurbandeira]

Hey Dave, great video, as always! Couple of questions, though:
- How can i implement this in combination with Zod, for example?
- Also, how could i modify the code if i want to use Redux toolkit for this?
- Is it possible to include some sort of 'goTo' so we can quickly jump to a specific part of the form?
- Finally, will the state be preserved even if the user refreshes the page or - in a system - log out and log in again?
Thanks a lot!

[mohsinghazi]

This is what I am waiting for. Thank you dave

[frvi]

Awesome tutorial. I felt like I was in class while watching this.

[milosignjatovic]

Hi Dave. I have a problem and I hope You may know the solution. I want to implement persistent log in by storing the jwt tokens in local storage (security is not the issue). I want to be able to close the tab or the browser, reopen it and since i have the access token in local storage the user should not need to log in again.
I used multiple contexts. For example, the outter most context is auth provider (it provides access token and refresh token to child components). The next one is axios provider (it provides the axios instance with interceptors attached to it and there is the refresh token logic like in your video). The third one is user data provider (it targets a backend endpoint, gives it an access token and based on the token the backend should return all user data and the context provides it to all child components).
Finally i have a protected home route. It is protected with Require auth component (just like you did) and it checks if the user data object (that is provided by the user data context) is empty. If its empty, we should navigate to log in page, else we render the Outlet (home component).
When i add console logs i figure out that a strange thing happens. When i close the tab and then reopen the react app in chrome first my RequireAuth protection component renders and prints out that user data is undefined (even though there is an access token in the local storage) and after that happens, then the context above it renders and logs the username (from user data) which is successfully retrieved based on the access token. Seems like for some reason react first renders the RequireAuth and after that renders the context... That only happens when i close the tab and reopen it. In case of regular log in, the rendering and console logging order is fine.
Really hope i explained it decently. I appreciate if you even read this :)
Thanks in advance.

[samobaidi]

Good Video Dave, i wish if you could think about react table V8 its really good topic and most of the videos are talking about V6 . and thank you for your hard work

[richardwilliam]

Thanks a lot
Waiting for your react native course

[Enes-kjmu]

Sizden Nextjs i ve SSR CSR ISR gibi kavramları izlemeyi çok isterim

[lyndistech]

nc guide. btw do you have a tutorial for nested reusable navigation for sidenavs or any kind of navigation?

[nickwoodward]

Hi Dave, love all the videos, I always end up back at one of them when I'm stuck - great sign they're quality!

Just wondering - you don't seem to use Routes here from what I can tell, is that right? I'm just trying to make a React multi-step component using react-hook-form *without* routes (I'm in Astro). Is that even possible as far as you know?

[mohsinghazi]

Hello Dave, could you make a tutorial on how to create a PDF (like invoices and bills etc) in the Mern app?

[emmanuelakogwu]

this is invaluable

but why don't we use useReducer for the plenty states

[PeachesYes]

Your same as billing impl goes against what the core react team encourages re useEffect. The shipping state should remain untouched when the checkbox changes and you should simply derive which state to show in the UI via a ternary on the checkbox state that resolves to billing or shipping addresses

In your prev/next checks you could nix the map loops with Object.entries

[regilearn]

Hi Dave, what will happen to the data if I go back and forth in this form and if I refresh the page.any solution for that any suggestion, It and interview question for me, appriciate if you can guide me for those answers .

[sashaikevich]

Great trick with the ! But, what's the reason to destructure it and wrap it in an array? Why not just check the array Object.values returned?

[dzhaniivanov]

good trainer but i hate tutorials with copy/paste snippets.greetings

[monirshimul]

Everything is ok, but I think your explanation at tricky conditional code, should must be more clear, easy explanation, and slow. Sometimes you go very fast. as your are owner of your content, its very easy to you to teach us verbally, but it would be more helping if you explain it by writting code instantly, not copy-pasting. thank you Dave. Please dont hurt by my word.