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 ) ❤❤
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.
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
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
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
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
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. :)
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.
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!
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.
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
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
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.
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?
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".
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.
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
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.
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.
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??
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
hey bro can yoy make course on backend? your way of teaching is awsome i'm starting css today by the time i will end frontend if you has backend course it will be awsome
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.
Danke! Wow 😲 this is exactly what I was looking for today. Destiny 😄
Love it when a tutorial just comes out at the right time to solve a problem
Glad I could help!
The fact that you are making React tutorials using Vite and Typescript is mega awesome 👍🏼👍🏼👍🏼. Big up to you man.
nothing beats good ol' JS. typescript is for the weaks (writing this comment while waiting for intellisense finish loading)
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 )
❤❤
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.
This is what I've been searching everyday for past few months...! React with Typescript and Vite
Gotta say thank you for having a clear easy to understand voice. All these UA-camrs got thick azz accents and this coding shit is hard enough 😤
This one was hard, but im learning typeScript so.. One of your best videos and I watch close to all of them!
We need more this type of tutorial to solve problems in real world application. thanks kyle
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!
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
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
Good luck with your journey with learning React!
@@coderyan thanks
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.
Enjoyed this format quick fast under 30mins, packed with useful tips and content. Well worth it. Thanks man
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
I literally am needing this right now
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
Awesome tutorial dude! I dont know why took me so long, but now I'm subscribed!
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. 🙌
Helpline 📲📩⬆️
Questions can come in⬆️
What a beautiful Form you created. Wow, very beautiful
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
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
I have been looking for such a tutorial. Thanks so much for this 👍👍
When vite ask you for project name type "." then it will create your project in current directory. no need to move your files
He know bro .but he want to make beginner friendly
Ohh nice.. Maybe it will help someone.. not him but someone...
@@chinmoykr yes Lets meet bro show your github link
I didn't know, thanks for the free information.
@@nabinsaud4688 so the comment need some expert to understand it ?
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. :)
Nice tip! Something I can use in future projects.. pretty new to Vite
Need more of these react typesrcipt vite projects 🔥 👍
Nice tutorial! I rewrote this in solid-js. Learn a lot.
A second video from you that gives me good head-ups to understanding react. Thanks for the good content.
Thank you so much! I've used your approach in my student project and mentioned you in github )
One day this video will save your day
There is also a ReactPropsWithChildren interface your props could extend. That automatically adds a children field to your props
It is PropsWithChildren actually. Thanks!
There is one problem though what if we want the children to be required. It is optional in the type you mentioned.
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.
@@piyushaggarwal5207 you can use the Require util type to set fields of a type to be required.
Great tutorial! I Appreaciate that a lot.
Just what I needed 😌
Great tutorial. Love your stuff. This helped me out significantly.
Great video, took a bit but I fully understand it !
great video Kyle
Kyle, you're the GOAT!
This helped me a lot. Thank you!
Amazing as always
Amazing explanation!
Amazing friend!
Loved the tutorial
Great video. Thanks.
Great content
1m subs congrats
More similar lessons with TS are needed)
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!
Thank you!!! 🙌🙌
Thanks King
Awesome bro love from india
Thank you very much, its an amazing video, very useful
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.
Thank you very much it helped me a lot☺
Happy Aayutha Pooja 🥰
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
could you do any validations?
This would have been great 2 years ago before I had to come up with my own as a junior react dev
Лайк не глядя
Amazing thanks 🙏
It great. Thank you very much
Please more React + Typescript projects. 🙏
Awesome!
Around 26:30, how were you highlighting both instances of 'email' in the value/onChange props?
Ctrl + D, bro
Helpline 📲📩⬆️
Questions can come in⬆️
Thanks so heplful!
Grate. Thank you !!!
awesome thank very match
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
Helpline 📲📩⬆️
Questions can come in⬆️
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.
Helpline 📲📩⬆️
Questions can come in⬆️
thank u so much sir
Tnk excellent ❤❤
What's the alternative for steps: ReactElement[] from the custom hook in ReactJS, cuz I don't know TypeScript?
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?
Hi I am currently having same challenge. Can someone anyone please respond to this question. Thanks in anticipation.
Thank you for the guide! Could you please advise if we can use custom validation with this form?
please make a course on typescript bigginer and advanced
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".
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.
Very great tutorial, I want to ask about how to let the code auto format when on save?
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
@@coderyan Thank you!
thank you for this great tutorial sir, please why can i persist data for checkbox ?
Great, but... If you put your buttons (next, back,...) inside your "Step Component". How could you do that?
How would you use formik with this stepper function for validations
Hello! Thanks for tip, but how to implement custom validation for every form in this scheme?
Why did you switch to vite? Is CRA dead now? How are the things look like with setting up the react projects now?
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.
hey thanks so much for this wonderful tutorial. what if I wanna write the custom validation to any of the individual form field?
Would be so much cooler with carousel animation
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.
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??
you are fast AF
do you think this project could benefic of using useReducer instead of useState?
if we have to add react-hooks-forms and zod validation what would be apporach then
Can I use "useForm"? like "register" for example? cause I need all inputs are completed
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
Any sources on how to accomplish this with Select? Specifically, when the Select is in a separate component?
hey bro can yoy make course on backend? your way of teaching is awsome i'm starting css today by the time i will end frontend if you has backend course it will be awsome
What if you refresh it would go to step 1 if you're at step 3
How to add routing and change components with routing within multistep in react-router v6?
Hi Kyle can you help me with this mongoose error : Task validation error path content is required
Im on version 6.6.5 btw
How can we add frontend validation in this form?
what does the & mean when he declared the UserFormProps???
type UserFormProps = UserData & {
updateFields: (fields: Partial) => void;
}
Is there a reason why is the form data state and the form data handler not put in the hook?
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.
How to achieve this results with Formik and Yup validation
nice video thanks!
type FormData = typeof INITIAL_DATA; best choice?
How can i build a booking appointment for a doctor office
How to use that goTo Function ??