Multistep Form Custom Hook With React And TypeScript

[@Alex-uc1mp]

Danke! Wow 😲 this is exactly what I was looking for today. Destiny 😄

[@coderyan]

Love it when a tutorial just comes out at the right time to solve a problem

[@WebDevSimplified]

Glad I could help!

[@SeanCassiere]

The fact that you are making React tutorials using Vite and Typescript is mega awesome 👍🏼👍🏼👍🏼. Big up to you man.

[@arshiagholami7611]

nothing beats good ol' JS. typescript is for the weaks (writing this comment while waiting for intellisense finish loading)

[@PrincessStache]

Thank you so much! Typescript tutorials are so needed. I really appreciate how you go through each step and keep going back to get the needed functionality.

[@WatchMeLearnIt]

Great video! Would LOVE to see a part 2 of this where you implement some kind of fetch request like you talked about at the end!

[@niklassoderberg2168]

This one was hard, but im learning typeScript so.. One of your best videos and I watch close to all of them!

[@muhayminkhan7063]

Today i've learned a best way to do some things thanks to you (1) React-simple-search-filter (form your other video) (2) Multistep-form-React-Typescript (This is the Brilliant way I guess ) ❤❤

[@kingsleyovo8889]

Nice videos as always I have found that kyle slowly transform the language from js to ts…. Ts should be the greatest adapter for learning Java and js

[@EvertJunior]

Great video. I usually work with a react-hook-form library and this video gave me some insights on how it probably work under the hood.

[@developer_hadi]

Bro thank you so much this is very simple and easy, please keep sharing things like this in react and typescript because it really makes my life easier as a beginner in react

[@coderyan]

Good luck with your journey with learning React!

[@developer_hadi]

@@coderyan thanks

[@oxynetz]

Enjoyed this format quick fast under 30mins, packed with useful tips and content. Well worth it. Thanks man

[@andresvodopivec5950]

Great video. You solved a problem I had in 28 min. Appreciated for focussing more on the react part, instead of the styling part. Makes it easy to follow the video. I decided to sibscribe to your channel after this. Great content. Thanks

[@FalioV]

Awesome tutorial dude! I dont know why took me so long, but now I'm subscribed!

[@darkNovaskar]

Gotta say thank you for having a clear easy to understand voice. All these KZbinrs got thick azz accents and this coding shit is hard enough 😤

[@elelan]

This is what I've been searching everyday for past few months...! React with Typescript and Vite

[@chinmoykr]

When vite ask you for project name type "." then it will create your project in current directory. no need to move your files

[@nabinsaud4688]

He know bro .but he want to make beginner friendly

[@chinmoykr]

Ohh nice.. Maybe it will help someone.. not him but someone...

[@nabinsaud4688]

@@chinmoykr yes Lets meet bro show your github link

[@TheZayzoo]

I didn't know, thanks for the free information.

[@guestofallah7661]

@@nabinsaud4688 so the comment need some expert to understand it ?

[@anand_dudi]

We need more this type of tutorial to solve problems in real world application. thanks kyle

[@olexandrperlov6426]

this type of multi step form is so clean and ease that I can't be happier and I will definitely use it in my project. Thank you so much

[@mountaingoatgaminggg9395]

Loved this tutorial, used a lot of the concepts here in my irl project I am working on, now just gotta learn how to intergrate a signature pad and how to save that and Im golden! Good Stuff

[@bravo1oh1]

I literally am needing this right now

[@clarkdnro]

What a beautiful Form you created. Wow, very beautiful

[@kelvink96]

I have been looking for such a tutorial. Thanks so much for this 👍👍

[@kartik7775]

No matter how great a job I land in future, I'll always be grateful for your lessons and will dedicate my success to you. 🙌

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@kunfun1916]

Nice tutorial! I rewrote this in solid-js. Learn a lot.

[@philipjamesajagabos2519]

A second video from you that gives me good head-ups to understanding react. Thanks for the good content.

[@milendonchev737]

Great video as always my friend! Quick tip (you probably know, but anyway) - When you create a Vite app, which you want to be in your CWD, when it asks you for name of project, just type a dot (".") and it will create the project in there. :)

[@coderyan]

Nice tip! Something I can use in future projects.. pretty new to Vite

[@fabianpetersen2452]

I did this the other day with another tutorial because i wanted to learn how to do this. Boy was it a royal complicated mess. The logic was hard to follow, i used custom hooks like you did otherwise theres so much code you get dizzy if there's many fields per form 😂😂😂. This was simple aka your name and easy to follow if you need to reuse this months later..thanks bud

[@marvelBoy1909]

Need more of these react typesrcipt vite projects 🔥 👍

[@gyros9162]

Thank you so much! I've used your approach in my student project and mentioned you in github )

[@gray_hat]

There is also a ReactPropsWithChildren interface your props could extend. That automatically adds a children field to your props

[@piyushaggarwal5207]

It is PropsWithChildren actually. Thanks!

[@piyushaggarwal5207]

There is one problem though what if we want the children to be required. It is optional in the type you mentioned.

[@gray_hat]

The type for children is ReactNode If children is required by your usecase then you can potentially add `children: ReactNode` without using PropsWithChildren. Although for such use cases you probably have a specific type you might wanna use for children and not the generic one. So you can do that too.

[@uome2k7]

​@@piyushaggarwal5207 you can use the Require util type to set fields of a type to be required.

[@martinkoller3595]

Great tutorial! I Appreaciate that a lot.

[@TheFirstUserHandle]

Great tutorial. Love your stuff. This helped me out significantly.

[@EricShans]

Great video, took a bit but I fully understand it !

[@pmioduszewski]

One day this video will save your day

[@kanishka5948]

Just what I needed 😌

[@fipabrate]

This helped me a lot. Thank you!

[@simplyabdou8425]

great video Kyle

[@yevhenlysenko7444]

More similar lessons with TS are needed)

[@baolee4622]

Amazing explanation!

[@kathirmldata7411]

Happy Aayutha Pooja 🥰

[@beinerthchitivamachado9892]

Kyle, you're the GOAT!

[@joaoarthurbandeira]

Hey Kyle, - 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? - And how can i implement the 'goTo' part so i can quickly jump to a specific part of the form? - Finallly, Will the state be preserved even if the user refreshes the page or - in a system - log out and log in again? Lots of questions haha, but thanks anyway!

[@focusroom_]

Amazing as always

[@piyushaggarwal5207]

Loved the tutorial

[@plamenpetkov746]

What's the alternative for steps: ReactElement[] from the custom hook in ReactJS, cuz I don't know TypeScript?

[@blogpegaaki]

Amazing friend!

[@tomasburian6550]

Strange that I'm getting TS errors when I try to write the same code, but otherwise this was a great lesson. I'm trying to implement it into Next.js right now so this was a good starting point for me. With Next js it gets more complicated because of SSR and the use of hooks and translations but it can be done.

[@kinamartinez]

Thank you very much, its an amazing video, very useful

[@khurshedaalam7478]

Awesome bro love from india

[@mohammadkhakhsoor2068]

thanks , wish it had other types of inputs and also validation please create one with more detail , like when in one of the steps there are 3 itmes to choose between one of them and only one of them should be selected and go to the next form

[@rosmildolopes3985]

could you do any validations?

[@UnderstandingCode]

1m subs congrats

[@paulthomas1052]

Great video. Thanks.

[@אילהוייס]

Thank you very much it helped me a lot☺

[@Mutoforma]

Awesome! Around 26:30, how were you highlighting both instances of 'email' in the value/onChange props?

[@ongangminh6627]

Ctrl + D, bro

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@eliamzg]

This would have been great 2 years ago before I had to come up with my own as a junior react dev

[@GMPGIRI]

Please more React + Typescript projects. 🙏

[@benny-shen]

Great content

[@artemryabykh]

Thank you for the guide! Could you please advise if we can use custom validation with this form?

[@nandoomb]

Great, but... If you put your buttons (next, back,...) inside your "Step Component". How could you do that?

[@yahiachougui6074]

Great video, is there a way to pass the fnction next() or a function goTo() to one of the step elements? that way when you have like a summary step where you review all the information you can go back to a particular step and change the information in it?

[@pofiabel9526]

Hi I am currently having same challenge. Can someone anyone please respond to this question. Thanks in anticipation.

[@amitakolkar2389]

This is a great way to create a multistep form. Thanks for sharing. How can we handle a large forms with different sections? Here as well you have maintained one single state at parents and its updating whole object every onchange event. {...pre, ... currentField} Having soo many inputs and those are dependent on each other. As we are passing a object down it rerenders all children components. We can pass a primitive data to children and use useCallback hook at the top. But still it doesn't seems like best way. Can you please create a video on that about how to handle a large forms with best performance.

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@deatho0ne587]

At 25:42 you have a lot of repeated code that works, but is there a better way in React? I have been working in Angular for quite some time and generally make arrays of objects that make repeated stuff. Something like [{field: 'localZip', maxLength: 5, type: 'number'}, {field: 'city', maxLength: 30, type: 'text'}]. That array would make all the HTML elements and the labels would use the field to make something like "Local Zip" and "City".

[@Zikakoo]

Yes, a cleaner way to do it is to create an array of objects from the interface keys and fill in the needed information per input (label, required, value etc whatever is needed). Passing the values as an object you can access the inputs own value with the bracket notation. Then loop through that array of objects to create the inputs needed.

[@turbulantarchitect5286]

Hi Web Dev Simplified, can you please make a series on how to create reusable form component, input components, error/validation handling with Hooks. Thanks

[@whatsapp176]

Helpline 📲📩⬆️ Questions can come in⬆️

[@zixuanchen8898]

Very great tutorial, I want to ask about how to let the code auto format when on save?

[@coderyan]

In most code editors, you can access the "preference" tab, and then you can search for "on save" -- often, you'll see an option to enable format on save

[@zixuanchen8898]

@@coderyan Thank you!

[@penguinthesolver1405]

Hello! Thanks for tip, but how to implement custom validation for every form in this scheme?

[@mddx56]

Thank you!!! 🙌🙌

[@gopinathkrm58]

thanks and great, and I have a doubt from ur Spotify clone video, it is playing only for 30 seconds but how to play it fully. I used audio_preview_url from response data.

[@deveshwarzard9781]

if we have to add react-hooks-forms and zod validation what would be apporach then

[@xJAYDENFx]

thank you for this great tutorial sir, please why can i persist data for checkbox ?

[@shivamrathore8291]

Hey, thanks for the video. (apart from video's topic) I am in a little bit of confusion in CSS CONFUSION : can we edit/modify the input box blinking cursor I want to change the input box cursor blinking animation style from blink to expand (like VS code) is this possible? if yes then please make a video or at least tell me how can I achieve this??, if not then why??

[@abdullahrafique2883]

hey thanks so much for this wonderful tutorial. what if I wanna write the custom validation to any of the individual form field?

[@deepikarao2593]

How would you use formik with this stepper function for validations

[@carolinatavares1843]

do you think this project could benefic of using useReducer instead of useState?

[@Lichkuroro]

Hey Chief!! , im not using, typescript and when i send the steps from app to useMultiStepHook, it is received as an array of objects, so console.log(steps) reads its info, but console.log(steps.lenght) is undefined.. heres what inside steps [ { '$$typeof': Symbol(react.element), type: 'div', key: null, ref: null, props: { children: 'One' }, _owner: null, _store: {}}, {... }, {...} ] but steps.lenght is undefined.. thnx in advance

[@zakidzz]

please make a course on typescript bigginer and advanced

[@Anushkai1]

It great. Thank you very much

[@szymonoleszek2086]

Why did you switch to vite? Is CRA dead now? How are the things look like with setting up the react projects now?

[@SeanCassiere]

CRA isn't quite dead yet, but you really should be using Vite instead. Since Vite uses ESBuild the dev experience is much faster. Also, it doesn't give you foot guns like polyfilling node_modules into the client which could create some unintentional mess ups.

[@juanita8149]

Any sources on how to accomplish this with Select? Specifically, when the Select is in a separate component?

[@rosmildolopes3985]

Can I use "useForm"? like "register" for example? cause I need all inputs are completed

[@AMoktar]

Amazing thanks 🙏

[@mustak_085]

[@wudao88]

Thanks King

[@sandeepsinghmehra3237]

How to add routing and change components with routing within multistep in react-router v6?

[@SachinYadav-yx1rc]

What if you refresh it would go to step 1 if you're at step 3

[@anaordonez7906]

what does the & mean when he declared the UserFormProps??? type UserFormProps = UserData & { updateFields: (fields: Partial) => void; }

[@Distortie]

Anyone have issue with pages 2 and 3 not keeping their data when going back and forwards through the buttons? the data object gets updated.. just not the data staying inside the input fields

[@karis7539]

Would be so much cooler with carousel animation

[@eddyelamin9015]

Hi Kyle can you help me with this mongoose error : Task validation error path content is required Im on version 6.6.5 btw

[@nirajgurung8348]

How can we add frontend validation in this form?

[@oleksiihm]

Thanks so heplful!

[@leonitshaqiri9671]

How to achieve this results with Formik and Yup validation

[@awekeningbro1207]

Is there a reason why is the form data state and the form data handler not put in the hook?

[@SeanCassiere]

That is because the hook is being used purely for managing the logic of the multi-step process. This would then allow for multiple independent multi-steps forms sets to be implemented without having to duplicate and manage that logic. Plus the form state and submit stuff could change quite abit depending on the type of info being collected and is better left to the dev to handle that individually.

[@Alyaman_Accounting_System]

awesome thank very match

[@mr_parth_dadhich]

How to use that goTo Function ??

[@kanishkkumar535]

you are fast AF

[@amirulidzham]

Angular not supporting vite yet?

[@bigguns845]

How can i build a booking appointment for a doctor office

[@irfansaeedkhan7242]

custom error messages missing which should also disable next button

[@devByDash]

thank u so much sir

[@justpeace7852]

Лайк не глядя

[@michaeltrembovler8301]

Grate. Thank you !!!