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
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}%`}} (:
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.
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 ?
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!
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?
ปีที่แล้ว
Muito bom o vídeo e serviu perfeitamente para o que eu estava precisando fazer :)
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?
how can i handle and save data for radio and checkbox?
ปีที่แล้ว
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, 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
@@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.
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.
"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?
Really wonderful keep going forward.. would you make a video on cascading combobox three levels thus like company department devision like country states areas
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 :/
![[TH] 2024 PMGC League | Survival Stage วันที่ 1 | PUBG MOBILE Global Championship](http://i.ytimg.com/vi/FVFT-PFwU80/mqdefault.jpg)
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 👍👍👍
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.
Nice job, is there any way you could make a video like this adding validation on each step?
Insightful Video> You Explained It In Very Simple Way
Como tu pode ter uma pronúncia tão boa????? Adorei o vídeo
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..
For the page display function it may be better to consider a switch? Incredibly helpful though thank you
Once I saw this video which is exactly what I needed.. I scrolled no further
You're a genius king
Thanks a lot it would be great if you tell how to validate fields when going from one step to another
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.
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
this guy always helps me. thanks...
So happy seeing you get to all the milestones❤
Thank you! You are an OG sub :)
No one can explain better than this! 👍
Such A great teacher u made it too much easy or me🤩🥰
Good video for begginers.what to do if one of the step have file upload,how are you going to deal with file upload
So happy with this video! Thank you.
Thank you Pedro. was really clear to understand multi step form logic :)
Good stuff! The explanation is straightforward and I like It!
DON PEDRO... love your tutorials
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.
you saved my time brother, bravo
Thank you, Pedro! Você está fazendo um bom trabalho :)
Anybody else have an issue with the setPage function? It keeps going back to the default value of 0. I'm using Vite + React.
ohhh boy ! NICE AND SIMPLE
Thanks for this video its simple and informative.
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.
so nicely explained i love your teaching, omg thank you so muccchhhhh
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!
i like that man, very nice explaination, i will implement this for my react native app. Thank you soooo much
Boa Pedrão, ajudou bastante meu amigo
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!
very simple and easy, thanks
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?
Muito bom o vídeo e serviu perfeitamente para o que eu estava precisando fazer :)
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)
Hi Pedro, Really helpful video, and learned some logic.
Learning a lot of stuff from your channel, thank you so much!
Thanks for the tutorial... Could you make a video explaining how to add google auth in a node js - react app?
Thanks man, how's can I add validation to it ?
Also show how to add validations accordingly
This is gold. Thank you.
If I have a API I need on every click i want to pass the form data as payload can we do this ??
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?
how can i handle and save data for radio and checkbox?
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.
Wow this was great, thank you!
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
Beat job brother, i am damn i will be pro in react with your videos.
Really , thank you so much for everything
Need a help..... when clicking submit i want redirect to another page
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.
Very helpful so much, Thank you!!
Glad it was helpful!
what'd happened if user refresh the browser in the middle of those steps ? will il be vanished ?
Awesome tutorial thank you
Can you also make multi-step form redux and react-hook-form? Thank you!
Thank you very much, sir.
Thank you, Pedro
"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?
we love this ❤️
Great Tutorial!
Thanks bro for this tutorial
video about FieldArrays in multi-step forms plz ⭐⭐⭐⭐⭐
how can we add validation to this logic ?
need more react hook form yup content
Really wonderful keep going forward.. would you make a video on cascading combobox three levels thus like company department devision like country states areas
Amazing! Thanks a lot!!!
What's your Vs Code theme ?
Who told Pedro to add a direct link to his git respository? 😁😁😁
you are the best !
Thanks for this tutorial.
Glad it was helpful!
what if i reload the page on any step ?
What vs code theme is that ?
how to make it online?
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 🙏💛
Awesome awesome awesome
Thanks dude 👏👏
Thank you so much
I need give you more than one like 🎉
in my form i need to post an image, anyone know how to do that with this method?
Thank you so muchhhh
Thank You Pedro For this enjoyable tutorial 🤍
Thank You bro
Congrats!
Thank you!
How would you add a date picker to this form
You could just add one normally, it wouldn't make any difference.
Valeu demais!!!
very good, thx.
Thanks a lot :)
good job
thanks !!!!
thanku sir for code
Muito bom.
Nice one
Thanks 🔥