ReactJS Multi-Step Form Tutorial - React Hooks Tutorial
HTML-код
- Опубликовано: 5 окт 2024
- Code: github.com/mac...
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
#reactjs #coding 
Наука
I just went through your code on a github, specifically on multi-step-form-react/src/components/Form.js. I must say its neat, precise and readable. Thanks a lot, this is really helpful.
If you want to fetch the progress bar width dynamically meaning it will change based on the number of forms then use this formula in style:
style={{ width: `${(100 / FormTitles.length) * (page + 1)}%` }}
This will calculate the width based on the FormTitle length and page count
Superb, you forced me to like this video because of your teaching style and stepwise action 👍👍👍
Nice job, is there any way you could make a video like this adding validation on each step?
Como tu pode ter uma pronúncia tão boa????? Adorei o vídeo
man, i just wanted to thank you a million times. you are a genius. i hope you'll make tutorial on local storage soon bro.
This was beginner friendly and absolutely fantastic.Thank you so much
I think for the progress bar width, it's cleaner to write style={{width: `${page * n}%`}} where 'n' is equal to 100 divided by the amount of pages in your form. For example, my form has 13 pages, so 100 / 13 = 7.7 (round up to 8), so for me this will be style={{width: `${page * 8}%`}} (:
WOW.... JUST WOW... THIS KIND OF CONTENT REALLY HELPS BEGINNERS LIKE ME A LOT... THANK YOU..
Insightful Video> You Explained It In Very Simple Way
this guy always helps me. thanks...
Thank you, Pedro! Você está fazendo um bom trabalho :)
So happy seeing you get to all the milestones❤
Thank you! You are an OG sub :)
For the page display function it may be better to consider a switch? Incredibly helpful though thank you
It was a great tutorial although I have a question if we try to do a radio button instead of type="text" the values are not being saved as you click on next button. Can you show with an example of radio button ?
+1
Thank you Pedro. was really clear to understand multi step form logic :)
Hi, nice job with the videos, it is helping me so much with my learning curve. it is exacly what the marketing is expecting those days. One thing I am struggling, going back to the FULL stack videos, right now is an example on how to deal in the front end with Many To Many relationships, I could do the Sequelize part, and some calls, but I am struggling on making the calls on the front end. If you have an example using Many to Many ( on your videos you have 1 to many only ), it would be very nice to see. Thanks and keep up the good work!
Thanks a lot it would be great if you tell how to validate fields when going from one step to another
Once I saw this video which is exactly what I needed.. I scrolled no further
Just started in my first job last week and your video saved me a lot of time. Thank you so much!
By the way, teu sotaque em inglês é quase nulo, parabéns pela evolução na língua também.
So happy with this video! Thank you.
you explain so good bro ! i'm so happy to find you.
Thanks for sharing this video. It's helped me a lot with my official project.
Muito bom o vídeo e serviu perfeitamente para o que eu estava precisando fazer :)
Good stuff! The explanation is straightforward and I like It!
Such A great teacher u made it too much easy or me🤩🥰
Thanks for this video its simple and informative.
Hi Pedro, Really helpful video, and learned some logic.
Learning a lot of stuff from your channel, thank you so much!
You're a genius king
This video helped me so much! Thank you Pedro!!
Happy to help!
love this channel, you taught me a lot of knowledge i know today....
Glad to hear it!
i like that man, very nice explaination, i will implement this for my react native app. Thank you soooo much
DON PEDRO... love your tutorials
Really wonderful keep going forward.. would you make a video on cascading combobox three levels thus like company department devision like country states areas
Anybody else have an issue with the setPage function? It keeps going back to the default value of 0. I'm using Vite + React.
so nicely explained i love your teaching, omg thank you so muccchhhhh
Boa Pedrão, ajudou bastante meu amigo
you saved my time brother, bravo
No one can explain better than this! 👍
Good video for begginers.what to do if one of the step have file upload,how are you going to deal with file upload
"O desafio é criar um wizard, como se fosse um cadastro em um e-commerce onde a cada novo step você precisa salvar o anterior no caso dele querer voltar para revisar ou editar algo. "
me pediram para fazer esse teste, to na duvida se é a ideia é +- a mesma coisa que vc ensina aqui ou nada a ver?
Thanks for the tutorial... Could you make a video explaining how to add google auth in a node js - react app?
It's really great for posting data. But what about file upload like image ? Can you please suggest something in multi-step form like this one?
Nice explanation. Made life a bit easier.
Hi Pedro, just wanted to ask, if we declare PageDisplay as an array just like FormTitles. So, in body we can display the jsx just like the title depending on the index of the array
Have you tried this. Would love to see how you did it
@@defme6022 I just made an array were I had put the jsx's as elements just like the form title. So when the user clicks next or previous the jsx is rendered the same way as that of that form titles.
@@ritankarbhattacharjee7661 aaah okay
very simple and easy, thanks
ohhh boy ! NICE AND SIMPLE
Very helpful so much, Thank you!!
Glad it was helpful!
This is gold. Thank you.
Beat job brother, i am damn i will be pro in react with your videos.
Also show how to add validations accordingly
Wow this was great, thank you!
Can you also make multi-step form redux and react-hook-form? Thank you!
Hi, how do we send the data of multi step form to the backend at once? Or like how to we handle the data of multi step form in the backend (Node.js)
Who told Pedro to add a direct link to his git respository? 😁😁😁
Really , thank you so much for everything
How can i create multiple modal on react ? (Login modal, Register modal, Forgot password modal) For example: I opened login modal and click forgot password text then Forgot password modal is opening how can i do it?
Hmm, I might be doing something wrong here. I mean, I tried to follow ur instructions, which where awesome btw, but I can only type 1 letter at the time on the input field. Is that bcs it changes and re-renders? If so, how I can solve this?
Awesome tutorial thank you
Thanks man, how's can I add validation to it ?
Caso eu queira que a pessoa possa voltar ao formulário anterior voltando a pagina, eu teria que ter cada pagina em uma rota, certo? E como eu faria isso para esse código que vc explicou?
Pois gostaria que em caso o usuário volte a pagina, ele n saia totalmente do formulário e perca o que já fez, apenas volte a etapa anterior.
Hi, Pedro. Is it bad practice t call the pageDisplay function the way you did? I implemented this and someone argued that it was a wrong way.
I'll appreciate your response or that of any one else.
Thanks bro for this tutorial
how can i handle and save data for radio and checkbox?
Thank you very much, sir.
Thank you, Pedro
If I have a API I need on every click i want to pass the form data as payload can we do this ??
Need a help..... when clicking submit i want redirect to another page
This isn't really a multi-step form as much as it is simply parent state segmented to different child components.
I'd recommend you at the very least use an actual form element, have some basic input validation, and submit handler(s).
Amazing! Thanks a lot!!!
please pedro we need a video about authentication in react with graphql 😢
I have this video noted down, but it will take a bit of time to make since it is a long process. Im planning on making it after my universities midterm season hahaha Gotta pass my exams :/
@@PedroTechnologies midterm 😂😂 oh so then take your time, i have the same suffering in my college and good luck in your exams 🙏💛
Great Tutorial!
what'd happened if user refresh the browser in the middle of those steps ? will il be vanished ?
What's your Vs Code theme ?
how can we add validation to this logic ?
video about FieldArrays in multi-step forms plz ⭐⭐⭐⭐⭐
we love this ❤️
what if i reload the page on any step ?
Thank you so muchhhh
Thanks for this tutorial.
Glad it was helpful!
Thank you so much
need more react hook form yup content
Thanks dude 👏👏
Thank You bro
in my form i need to post an image, anyone know how to do that with this method?
you are the best !
how to make it online?
What vs code theme is that ?
Valeu demais!!!
why are you building this from scratch when there are components such as mui stepper and libraries such as formik ...
How would you add a date picker to this form
You could just add one normally, it wouldn't make any difference.
Thanks a lot :)
Awesome awesome awesome
I need give you more than one like 🎉
thanks !!!!
very good, thx.
Congrats!
Thank you!
good job
Muito bom.
thanku sir for code