Fantastic video and super helpful! This should be in the Formik docs. Also very very respectable that you tell people that you're just doing styling at 29:00 so if they don't care about then then they don't need to watch anymore 🙌
OMG Buddy, this is the first video I saw of yours and after banging my head on wall for 2 days to be able to do a formik and stepper together and also fetching the values with validation, uhhh, I finally found this and it worked so so well for me, Thank you so much. Keep going, I instantly subscribed . Thanksss a Lottttt
OMG, I just opened RUclips and saw you’re notification, I came faster than a rocket hahahaha great vídeo my friend, you’re always bringing the best content thank you 😊
@@BrunoAntunesPT How would I add a function for a click on a button within a FormikStep that would allow me to update a field value in the initialValues object? I have 3 buttons or divs that when clicked on would set the field.
Sorry I only saw your 2 comments now and I'm very happy you were able to fix it 😊😀😀 Yeah, at the beginning it might be a bit scary, but after a while it becomes better, trust me 😀😀
I'm having to make a form with these exact technologies- I'm unfamiliar with materialUI and Formik. Your video is VERY clear even to someone that isn't comfortable with some of the tech. I especially like how you first do a "naive" approach and then build into a more optimized version. I am looking at the code for each step and just think "wow that's genius and makes a lot of sense". Thanks!
That is soooooo good to read my friend!!! I'm very happy for you. The best of luck on the interviewing process =D Let me know when you have the results. I have my fingers crossed for you ;)
That video is amazing! Thank you, it was a very beautiful explanation. The only thing I changed from your sample was the material UI component because I use Tailwind in my project so I had to add the ErrorMessage component to showing the validation messages with the TW style classes. But the logic is simple and clear to understand. Won a subscriber already!
Thank you very much Tom =D I have to try tailwind, there's a lot of good words about it on the community, but I'm so in love with Material-UI that I think it will be hard to leave material-ui behind =D eheheh
@@BrunoAntunesPT quick question, why did you pass onSubmit={async (values, helpers) ? i cantr see 'helpers' args being used anywhere? thank you again, Bruno :)
😂😂 ahahah Muito Obrigado Rodolpho 😁😁 Gostarias que eu fizesse algum video antes de iniciar (ou durante) a serie "React.js for beginners"? Todas as sugestões sao muito bem vindas 😍😍
Thank you, I'm glad it was helpful! 😊 If you want more in-dept details about formik and yup, in this video description you can find a link to another video Formik+Yup video (ruclips.net/video/kYyaJyTLjpk/видео.html). I hope you find that one useful 😍
I'm using both at the moment - for some reason my brain still prefer formik (probably because I'm using it for soooo long), but I can see clearly why someone would prefer form-hook. Someday in a not so distant future I'll drop a video using form-hook 😅😅
Thank you 😍 I'll do material videos by the end of the year or worst case January 🙂 this last months have been very hard to find time to record, sorry 😔
@@BrunoAntunesPT I was working with formik-material-ui switch and in the new versione if the type is missing in the attribute it does not work, in the 3 major release. Thanks
😊😊😊😊 This is the video you requested a while ago! I was about to say your name during the video, but I didn't knew if you would be upset if I mention you =D eheheh
@@BrunoAntunesPT really appreciate that. it was great seeing how it can be done. Wondering whats next. Gonna keep using it (like the rest of your videos) as a reference
This was a great walkthrough. Thank you for making this! Quick question. How would you handle the multi-step form if every field resided in its own component? Would you import the FormkiStep into each component? Looking at the code, it seems pretty straightforward when all of the form fields reside in the same file, but I'm not sure how to tackle this when I'm dealing with 12+ form fields all encapsulated in their own components.
Hello bruno , just a suggestion. Add the video playlist link to every video description ideally on the very top. Will probably also help with getting some more views . Greetings
Thank you very very very much for the suggestion Medy 😍😍 I'm really new to this youtube thing - Please, if you have more suggestions let me know. Tonight I'll update all the videos to have pointers to the playlist they belong to 😊😊
@@BrunoAntunesPTure welcome. btw your diagrams are aweseome ;) to exlain the concepts. I can totally see your experience shining through making it easy for you explaining complex topics in a simple way. If you enjoy them. Maybe target some even more beginner topics with potential bigger reach... just a thought You could also split up some videos ... to have less intimidating video length ... 10 - 20 minutes ... though I feel like.. once more ppl know you this wont be an issue I clicked anyways^^ ... Authentication is currently nagging me abit. Im still lacking a broader view what to choose for authentication... it seems like any of that stuff has its flaws ... Im very interstied in this because I care about having at least basic security for when I built some stuff.... . so as a beginner I would like to have " autetnication that isnt too hard to implement but for the most part safe" I found some basic aproaches here. But I still wonder if one should bother when there are options like firebase or strapi... In case you actually start building a real project. What would you pick for a small project .. and breath somewhat easy knowing that the next guy who just knows a tad about authentication cant crack open your system xD ? ! So in a sense I want smth where you can say "this should be somewhat safe"... for my first projects xD Anyway Im excited to see more. Greetings
All your tips are amazing my friend!!! Thank you very very much, you are amazing ♥️ Regarding authentication, in order to be easy, probably the best bet is to use passport with Facebook /Google/twitter autentication when possible. I have to prepare a video like that in the future. I think it will help people to have a secure and easy authentication system 😍😍😍 Once again you are amazing my friend, thank you, thank you ♥️♥️
@@BrunoAntunesPT Nah man you are amazing :D... My advice may not help much:D ... But mabye worth a try. A video to demontrate " what is a basic -/ secure" authetnication ... would be great. I mean for starters anything that works is fine .... but I have that little voice that is asking "but what if you app grows even a little " can I trust my own authentication or should I better trust google or firebase xD ... Greetings
Sorry Medy, for some reason I lost your comment =( Honestly lately I have been working quite a lot with auth providers like Facebook and Google. Looking into my analytics, I'm really really really tempted to completely remove my custom authentication system (almost nobody is creating accounts with email+password). I'll do some more analysis on this =D
Thank you my friend 😍😍 Yes, it's very possible to have just JavaScript without any TypeScript for this example! I created this codesandbox in pure JavaScript: codesandbox.io/s/dry-architecture-kfmd7?file=/src/pages/index.js Let me know if that is what you were looking for 😃😃
If you are learning and you don't mind, I'll give you a tip 😃 When you see any typescript code that you don't know how to convert into JavaScript, you can put it over here: tsplay.dev/oN5A9N One the left you can see my typescript code (from this video), on the right, the "converted" JavaScript code 😃
Are you asking about having different components for each step? If that's the question, absolutely, it will make the code much easier to read 😀 Regarding the validation we have validation per step. You can also have global validation but having it per step seems easier to read for me 😅 Sorry if I misunderstood your question 😅😅😅
Loved this tutorial. Can you show us how to introduce options between two textfields? Where the user can choose either a specific textfield or they can choose the other textfields to fill.
Thank you my friend =) I don't know if I fully understood your example. If you can give me a practical example, probably it will be easier for me to understand =)
@@BrunoAntunesPT imagine if there's a website which allows us to POST books. Imagine if we're trying to write a book from scratch. We have to give it a title for the first time. And then move on. But if we've already written somepart and then we're returning later on, so now we have to choose from the available books (so that we can carry on from where we left of) I hope I didn't make this more confusing 😅
I think I got even more confused now 😅😅😅 probably because it's weekend and my brain is lazy 😂😂 Do you have any application doing that? If you can send me the url I think it will be the easiest way for my lazy brain to understand it 😅😅
@@BrunoAntunesPT okay so imagine if there's an option to either choose from an available list or add a new one to the list. The user can choose only one option. The one he chooses will change the state
Ahh you want some fields validating some other fields, cross-field validation? Can you just watch the first 35 seconds of this video to let me know if this is what you want? ruclips.net/video/kYyaJyTLjpk/видео.html
Thanks Bruno! Amazing tutorial! I am just having an issue, that after the first step Formik sets all fields to touched, so if I have a few fields in the second step as soon as I write in one of them all the validations show up on the other fields, I assume since they are all touched. Any solution? thanks.
Thank you very much =D Yes, did you check my repository? I did a commit at the time in the repository to fix that small issue that I missed while recording. The specific commit is this one: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/c7924e8b7d80d24f7aa227cae1c52f554ff503a5 Let me know if it fixes your issue :)
@@BrunoAntunesPT Thanks! I didn't know you could use setTouched with an empty object to reset. I ended up using resetForm with the old values, but this is much better. Really appreciate your quick reply. subscribed!
Thank you! This was a rare video with grateful informations. I just have a question that how we use formik props like 'setFieldValue' or 'values' on parent. Forgive me for this question, since I am junior.
I figured a way out but I didn't test it fully Wrapping FormikStep with FormikPropsProvider and passing props as function may work {(props)=> 'child components field etc'} { return React.createElement( FormikProvider, { value: formik, }, children(formik) ); });
Hey, Bruno, thanks for the awesome video!!! I have a question. Can I pass the 'touched' and 'errors' props into ? I wish to define classNames in depend on 'touched' property, and then highlight the fields with errors.
Thank you 😀 Formik provides a hook called useFormikContext 😀 I think that's all you need inside your formik step plus a render prop on the children of the formik step 😊
Hi Bruno, amazing video! Is it possibly to make it so that pressing the browser back button does the same as the back button on the form (if we somehow make steps have different URLs)? Or I can only show the users a popup so they confirm that they want to leave?
I would do the following: 1 - create a page: src/pages/my-page/[stepNumber].tsx 2 - take advantage of shallow routing - nextjs.org/docs/routing/shallow-routing 3 - every time you change step do something like router.push("/my-page/3", undefined, {shallow:true}); I did an example using shallow in the car trader app video 4 that might be useful to understand the concept. Video playlist: ruclips.net/p/PLYSZyzpwBEWTt-0uuxAcSrJmMlnD9Yuz3
This component is really awesome, but i has a problem. I need to access formik context for a depend select combos. For example, i have 3 levels, country, state and city, in each level i need to access my api to fill select combos. I dont know how to use handlechange (i am try handleblur) and i dont know how to use formik context to access country and state for fetch list of cities. Any help please.
Thank you very much =D You are lucky today =D I already have a branch on that repository using the formik context, to show a full name on other step :) That branch is here: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c/src/pages/index.tsx#L167 "The magic" happens in the last 10 lines of that file :)
Hi Bruno! Great video, as usual!! I leave a request in case you need ideas: how to handle user authentication in the server side in order to avoid flickering. I currently use getserversideprops for each route that I want to "protect", but maybe you know of a better way :)
Thank you =D What do you mean by flickering? Flickering between you going to the login page and other pages? Or between normal pages? Sorry, I'm probably missing something :)
@@BrunoAntunesPT Hi Bruno! Thanks for replying!! I'll try to explain myself better: if we have the "/signin" route and I am already signed in, If I don't use the getServerSideProps to know if the user is already logged in, the server will render the signin form, and when the client loads it will redirect or show something else like "you are already logged in", thus provoking the flickering. This would happen in all the user protected routes. Then the question is what would the better aproach/pattern to solve this problem about the logged in user. Thank you again for the answer and for all the videos, they are top-notch material!!!
If you don't do anything server side (getServerSideProps or getInitialProps) and navigate to /signin you'll be shown that page. A few (milli)seconds later your javascript finishes downloading, parsing and runs.... if you are not logged on nothing happens, but if you are already logged in it shows that message, hence you seeing the flickering. You saw signin page and now the new message. If you rely only on javascript client side you'll have that 😊
Hey Bruno, loved the video! Any chance a license (e.g. MIT) can be added to the github repo because I want to be respectful of your code and would like to use it for one of my projects! Thanks :)
Thank you very much Yousef!!! Yes, of course!!! All my code is public and you can do what you want with it =D I added a License.MD (MIT) to my 2 last repositories =D If you want I can add it to any other repository =)
Hi Bruno, I am back here, I followed your NextJS tutorial last time ;) thank you. I am wondering if maybe it is feasible to have a table with search bars and filtering in one of the step ? or is it only for small forms ? thanks
@@BrunoAntunesPT thank you !! yep I do. Thank you so much for your quick response :) last time you really helped us with next, my team and I scored a good grade at our coursework !! thank youuuu
That's awesome 😀😀 I'm very happy you all were able to score a nice grade 😍😍 Thank you soooo sooo much for letting me know that experience, it really makes me feel happy 😀
No worries 😀 Yes, you can use JavaScript, even though I would recommend TypeScript 😀😀😀 If you want to see this video's code in JavaScript, please check this: tsplay.dev/oN5A9N PS - You can put any typescript code there, and it "gives" you the javascript code. I hope this helps 😀
Great tutorial! However, how can i validate each step using server-side validation? For example, when i enter the email on the first step and i want to check if it already exists on the database.
Thank you 😍 You can have async validators with yup. Let me copy one of their documentation examples: // or make it async by returning a promise let asyncJimmySchema = string().test( 'is-jimmy', '${path} is not Jimmy', async (value, testContext) => (await fetch('/is-jimmy/' + value)).responseText === 'true', });
You want to be able to print it to a PDF and have one section per page? Sorry I'm a very confused right now 😅 If you want to build the different sections on a page and allow them to grow as you add more, then you don't need to do anything, meaning no special code on your side for that to happen 😊
@@BrunoAntunesPT to keep it simple, how to achieve the layout in page 2 of the pdf (Primary Contact) in Formik, which should be responsive. If we could push the form data to mongodb, that would be super cool.
Thank you my friend 😀 I have a video about file uploads with progress bars and everything: ruclips.net/video/MAw0lQKqjRA/видео.html Let me know if that video has all you need 😍
@@BrunoAntunesPT Thank you so much... can we concatenate two videos I want to have a multiStep form that my Third step is the Multiple File Upload using (DropZone) Codesandbox will be better. It is really urgent sir. Thank you in advance!!!
Yes, you can concatenate the two even on a codesandbox if you prefer 😊 Regarding moving it to javascript you can go to the typescript playground and it will show the resulting javascript from your typescript file 😊 If you have any doubt, let me know 😊
Hey Bruno! Awesome tutorial, as always. I have one question: validationSchema={currentChild.props.validationSchema} is what you have written. currentChild has been typed like this: const currentChild = childrenArray[step] as React.ElementType; and FormikStepProps give access to the following properties: export interface FormikStepProps extends Pick { } So, my IDE complains on the first line of code I've written in this answer ( the validationSchema= ...) TS2339: Property 'props' does not exist on type 'ElementType'. Property 'props' does not exist on type '"symbol"' I really like the "Pick" variant, coz it helps other developers instantly knowing what they can access. So is there a way to keep it even when accessing props like this? Adding props to Pick defeats its whole purpose
Thank you my friend 😀😀 I don't get any warning/error using vscode. Which editor/ide are you using? BTW executing "npm run build" do you get any error/warning? That is the "source of truth" 😊
@@BrunoAntunesPT build fails because of this. I made a public repo for you to check it out: github.com/Leviathan91/Examples/tree/master/formik/formik-multistep I am using IntellIJ IDEA, because of the the java background / android programming I'd really like to keep it :)
I don't have access to a laptop right now, but looking into your code and mine you are using ElementType in the first 4 lines of FormikStepper and I'm using ReactElement. I'm almost sure if you change it to ReactElement instead of ElementType you'll solve the issue 😀 Let me know if it worked out my friend 😍
Thank you Bruno! This was a great tutorial. One thing though, when I go to type in the first name field, I get the following warning in the console: Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. Any idea what could be causing it?
Thank you Steve =D Usually what you are seeing is because you are setting the initialValues with undefined (or null). For example: will trigger the warning you are talking about. If you have you shouldn't see any warning/error. If you clone directly my repository, for example using codesandbox, you'll not get the warning :) ==> githubbox.com/bmvantunes/youtube-2020-june-multi-step-form-formik Let me know if this fixed it, otherwise it can be something else (if you can share the code you are doing, that will help as well) =D
@@BrunoAntunesPT My initialValues looks exactly the same as yours 🤷🏾♂️ I've put my code in a gist here: gist.github.com/Steve-Reid/9d3481e0c8b591a8065567e7448e51d8 Thanks for your help 👍🏾
I think I spot the error =D On line 41 where you have: name="firstname" change it to be: name="firstName" in the initialValues you have "firstName" (capitalized N) and in line 41 "firstname" (without N being capitalized) =) Give it a try and let me know if the error is gone =D
@ 2:37 - passing inital values to formik.... So I have to write the initial values as an html attribute on the formik component. Will i have to pass the initial values for all my steps? What if there are 20 steps? Do i put 20 initial values?
more specificity to the question: What if i have a dynamic step that is generated based on how a user interacts with an optional element like a checkbox? i.e. a future FormikStep that depends on the earlier choice/data input of the user? Like if they choose option 1&3 in a checkbox, then there are dynamically generated steps they have to complete based on those two specific selections. Do I have to write out all possible scenarios in the initial values on the Formik component?
The answer is yes, you need to define every single initial value (even if an empty string). That is actually more to do with react than with Formik itself :) From the formik documentation: ``````` initialValues: Values Initial field values of the form, Formik will make these values available to render methods component as values. Even if your form is empty by default, you must initialize all fields with initial values otherwise React will throw an error saying that you have changed an input from uncontrolled to controlled. ``````` Link for this sentence in the docs: formik.org/docs/api/formik#initialvalues-values I hope this helps :)
Hello Bruno, What is your opinion about react hook form ? I find it more satisfying, if you think its great tool and if it is convenient could you make one video on it ?
I think they are really great libraries to work with forms. Currently I prefer to use formik, mainly because I'm used to it - this can change in a few months as I get more familiar with react hook form 😀 This also means you can probably expect a video about it in the next 2/3 months as/if my opinion changes 😀
You are amazing my friend, this was really really helpful! I wanted to ask you if it is possible to add a custom onClick() listener to a formik field without overriding the default formik one?
can I ask why you want to add an onclick? 🙂 Usually there are better ways than using onClick That being said, Formik doesn't use onclick. They use value, onchange, onblur etc, but no onclick 🙂 So if you add an onclick you should be good 🙂
@@BrunoAntunesPT I need to show a select component only when I click on a specific radio button and I thought if add an onclick function on the radio button that toggles the values of a certain state hook I can achieve that, you think there's an easier way?
I had almost a book written here in the comments trying to explain why using an onclick in that scenario would be a bad idea, but then I decided to delete my gigantic comment and create a demo for you without the onclick =D The demo also does sanitization, meaning if you select an option in the dropdown and then select another option in the radio button, after you submit you end up with a value WITHOUT the dropdown value (if you don't like that, just delete the if inside the onSubmit). I think I put every single detail in this codesandbox and in the end it was faster than my "book" and hopefully gives you much more value than my "book" xD codesandbox.io/s/elated-shape-m681g?file=/src/App.js
Bruno, thank's a mil for this tutorial. Im implementing this stepper in a signup flow that has three steps: signup w/ auth, choose a plan and submit payment. I'm stuck on the first step as I need to add the values of the input fields to state but for whatever reason, the "onChange" attribute isn't doing anything for me. Any suggestions?
Thank you Tony, If you use onChange you'll most probably have problems - because that's also what formik is using behind the scenes :) You can try another approach. On line 28 you have: ``` ``` Try to replace that line by the following JSX: ``` { console.log('hello', evt.target.value) }}} label="First Name" /> ``` Now every single time you time a new key in First Name you'll console.log hello + the current value in the input. Let me know if it worked for you =) Let me also know if that's what you were looking for =D
Redux I'm no longer using it, so most probably there won't be a video about something I no longer recommend 😊 Regarding context we might do one sooner or later 😉
Great video as always. I have one question, the validation on each step is great and working fine for UI side but how to deal with serverside validation which doesn't care about steps and only cares about whole form. For example, you submit to the server and it gives you error on field email as "Email already exists", and email field is in first step of our multi step form, how to locate to exactly that email field when there's an error from server side?
Thank you my friend 😊 In those cases I think async validation will help you for the email example 😊 In case you don't want to use it, you have two options. Keep a map of what field is in what step and when you get errors go to that step (or the step of the first error) Some apps I also saw expanding all the steps into one when that happens, even tho, I don't love that 😅😅
Very helpful tutorial Bruno, thanks a million. I have a quick question, please can you share how to use useFormikContext to pass the touched and errors value to the FormikStep and how to access it in FormikStep. Thanks once again.
Hey Bruno, thank you so much for this tutorial. That's exactly what i was looking for. Everhting works but i have a problem. I use async validation on change. But when i want to go to the next step the async validation runs again although isValid is true. Unfortunately, I have not yet found a way to work around this. Do you have an ideas how can i solve this ux issue?
Thank you very much 😍 Async validations will run on submit. Changing the steps we are submitting the form, making the validators run. Have you found a solution? 😊
@@BrunoAntunesPT yeah, i changed the button type dynamic. So on the first steps, the button type is button and only on the last step, the button type is submit. In this way, the onSubmit function runs only on the last step 👍
That can give you some edge cases 😊 I'm not 100% sure of what I'll say next, but please test to avoid problems 😅😅😅 One possible problem that comes to mind is if the user clicks on the next page before doing anything else on the page. At that stage all fields will be valid and because you are not submitting the form, the sync validation will not run, so the user will navigate to the next page with validation errors, which we should not allow 😊
If you already took care of that use case, I'm not thinking about other problems (currently) 😅 they might exist but at least I can't think about any right now 😅😅😅
This is very useful, can you please tell how can we use form values from steps ? For example, how first and last name from Form Fields can be used to show formatted Full Name in same form ? Regards.
Thank you my friend =D I ended up coding one possible solution at github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c Let me know if this is helpful - It shows on step 2 and 3 the message "Hello, {firstName} {lastName}!" =) PS - You have at least 2 other possible ways to implement this that will be cleaner in the long run, but this one is probably the simplest if you intend to use it only once or twice :)
I really liked your video and it is great help. I would like to ask if it is possible to access values in formik step ? I would like to conditionally render field if user have selected a checkbox on previous step.
Thank you 😀 It is possible, but in order to make that formik step component support render props, you'll make it extremely hard to develop - I dare to say very very very very very hard 😅😅😅😅 If you really need to use steps and access values for a field, then the very easy option is to create a custom field, which you can then access the formik values by using useFormikContext hook. I have a branch on the repository showing that (scroll to the very bottom of this commit 😊) github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c I hope it helps you 😊
@@BrunoAntunesPT I would like to disable submit or next button if the form is invalid, I have replaced submit button disabled property "!(isValid && dirty)" and it works fine but if i am on step 2 and form is invalid but if user click back to step 1 the next button here is disabled. How can i keep it enabled as the step is valid. Let me know if you prefer me to share example code.
Sorry for delay, Here is the link to codesandbox - codesandbox.io/s/sharp-swirles-cmf3k Replication Steps 1.) Step 1 - Enter firstName, lastName and click on Next 2.) Step 2 - Remove amount and you will notice Next button will be disabled. 3.) Click Back button to go back to Step 1 4.) Step 1 - The Next button is still disable even that step passed the validation. Qn- How can i automatically enable next button on Step 1 on Back Button?
Bruno. Awesome as always! I have followed this tutorial coding along, however typescript is shouting at me saying : "Property 'props' does not exist on type 'ElementType'. Property 'props' does not exist on type '"symbol"'. for this line: ```validationSchema={currentChild.props.validationSchema}``` This does not stop it from working as desired though ... Can you please explain why this is so? Checking my console, thr props property is there on currentStep. So I just don't get the reason why typescript is giving that bug
Thank you Samson 😍😍 If you check on 25:55 I have an "orange floating label" saying that it shouldn't be React.ElementType but React.ReactElement. I also did one more commit in the repo before launching the video with that small change 😊😊 Let me know if this helps. I hope it does help 😊
@@BrunoAntunesPT hahaha ... I saw the label, and tried it out by changing *React.ElementType* to *React.Element* but got an error *Namespace 'React' has no exported member 'Element'.ts(2694)*
Thank you 😊 At the end of each video I commit the code as is to github without any change 😊 In the video description I always have the link to the repository, in this case from the video description: Github Repository: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik I hope you find the code helpful/useful 😊
Hi Bruno, I heard in your videos that jss will be dismissed from material-ui for styling the pages. I understood that the jss will be replaced bt emotions ??? I'm not sure about what you said. Do you confirm that jss will be replaced by emotions ?? Thanks in advance
I am having issues submitting my form with the async await in the formik stepper. It keeps giving me a 'Cant perform a React State update on an unmounted component'
Depends how you are doing it 😊 can you share your code on a codesandbox to have a look? You can also check on my repository that I'm using async await without any problem - github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/12a03018c4072ce75c7138412b9a059966b6dae5/src/pages/index.tsx#L22
@@BrunoAntunesPT I got it to work. It was something else I had going on in my submit form. Thanks for the response Question though, how can we add in the formik bag? I want to for example conditionally render a field if the millionaire checkbox if true but I am unable to pull out the value the way I normally would by using something like formik.props.values
Awesome 😍 taking into account we can't grab the values, because the steps need the children, your best option will be this github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c/src/pages/index.tsx#L68 That component implementation is the last 5 lines of the file, where you can get the values by formik context 😊
Hi Bruno, thanks for an amazing tutorial, this helped a lot! I have one question: How do we render our values in our form? I'm trying to make a wizard for a webshop and the third step is to render the values people filled in (address), to check if they didn't make a mistake. I checked the documentation and apparently we can put {({values}) => ()} around our Form. If I do this, nothing renders on my page. Do you have any idea how to fix this issue? (I'm pretty sure you have :D) Thank in advance and keep up the good work!
Thank you mate 🙂 Yes you can do it. You are not the first one to ask for it, so at the time I created a branch in my repository to show the full name in steps 2 and 3 and that's exactly what you want 🙂 github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c
You are very welcome my friend 🙂 Usually I answer comments before and after work - you were lucky to ask something during one of my windows, otherwise I would only be able to answer tonight 😅😋😋
Thank you Sylvain :) Yes, it's possible to have "just JavaScript" without any TypeScript for this code! I put my code into the typescript language playground with the compile flags needed - tsplay.dev/oN5A9N You should be able to open that URL and copy paste the right side (JavaScript). I also created this codesandbox in pure JavaScript if you prefer: codesandbox.io/s/dry-architecture-kfmd7?file=/src/pages/index.js Let me know if it helps my friend =)
@@BrunoAntunesPT I created my multistepform :) with your video! But still one display dysfunction. How I can "jump" 1 or 2 step no necessary to go directly to the last one. I saw that it s the props active/completed that control display or not.
@@sylvainelineau8393 awesome. 😀 Yes the property step controls in which step you'll navigate to 😊 if instead of adding 1 you add 2, it will jump 2 steps 😊
Hi bruno, greta explain, great job. I have a problem?. I export the proyect only for study. I upload to my hosting, and doest work the stepp. Could you help me, please?
Thank you =) I did a deploy to vercel and it's working as in localhost: youtube-2020-june-multi-step-form-formik.vercel.app/ What's the message you are getting on your hosting platform?
That's because we are using formik-material-ui 😃 You can have a look into their documentation here: stackworx.github.io/formik-material-ui/docs/guide/getting-started
Thanks Bruno. I am doing similar thing but my fields of Formik are dynamic, i.e. they are dictated on the fly by a json, in that case, children of FormikStepper are not getting inherited properly in the wrapper. Can you please suggest the solution if my form doesn't have fixed static fields?
Sorry, I am a bit confused =X Do you mind to share a small codesandbox with your code? That way I think it will be easier to understand what you mean and help you with a solution :)
Yes, you are right 😃 The project is done on Next.js (Somewhere in the comments I already put this code (copy paste) in a create-react-app - it also works on "normal" react with create-react-app) 😊
Learn how to Unit-Test this form: ruclips.net/video/MhFSuOjU624/видео.html
thank you!
Fantastic video and super helpful! This should be in the Formik docs. Also very very respectable that you tell people that you're just doing styling at 29:00 so if they don't care about then then they don't need to watch anymore 🙌
Thank you very much 😍 I really appreciate it 🙂🙂
OMG Buddy, this is the first video I saw of yours and after banging my head on wall for 2 days to be able to do a formik and stepper together and also fetching the values with validation, uhhh, I finally found this and it worked so so well for me, Thank you so much. Keep going, I instantly subscribed . Thanksss a Lottttt
Thank you very much 😀😀
It is soo good to read your comment - I'm really really happy I was able to help 🙏🙏
OMG, I just opened RUclips and saw you’re notification, I came faster than a rocket hahahaha great vídeo my friend, you’re always bringing the best content thank you 😊
Thank you very much my friend Washington 😊
Your comments are always super friendly, thank you!!! 😊😊😊😊
This was really huge! Advanced contents about formik and typescript, many thanks! Continue like this and you'll be a millionnaire soon :)
Wow, thank you very much! I wish your prediction is correct =D =D =D
I lack the ability to express how amazing you are because I've been rendered speechless from your genius! Thanks again Bruno!
I'm very happy by your words ☺️☺️ thank you soooo much Danny ❤️
@@BrunoAntunesPT How would I add a function for a click on a button within a FormikStep that would allow me to update a field value in the initialValues object? I have 3 buttons or divs that when clicked on would set the field.
NVM. I simply looked at the documentation and was able to figure it out. Sorry, but Formik is a little intimidating. 😬
Sorry I only saw your 2 comments now and I'm very happy you were able to fix it 😊😀😀
Yeah, at the beginning it might be a bit scary, but after a while it becomes better, trust me 😀😀
you are the best teacher on RUclips coz you do your job with love.
Thank you my friend ❤️❤️ i love what I do 😍😍
I'm having to make a form with these exact technologies- I'm unfamiliar with materialUI and Formik. Your video is VERY clear even to someone that isn't comfortable with some of the tech. I especially like how you first do a "naive" approach and then build into a more optimized version. I am looking at the code for each step and just think "wow that's genius and makes a lot of sense". Thanks!
Finally found it ! was looking from days,,, Good work here.
Thank you very much Danish 😍😍
YOU ARE A LIFE SAVER, I managed to use the same method on React Native. Thank you very much.
Awesomeeeeeeee 😍😍😎 One day I need to properly learn react native, but I'm very happy this worked there 😜😜
@@BrunoAntunesPT I had to tweak many of it, But the general idea still implemented and worked just fine.
That's still very good news 😅😅
Thank you so much! Bruno Antunes. This is just what I had been looking for and breaking my head over! That's a lot of time saved for me!!
Great to hear it saved you time my friend! =D
Thank you for the awesome feedback :)
This helped me so much in a job interview. If I get that job I have you to thank. God bless you.
That is soooooo good to read my friend!!!
I'm very happy for you. The best of luck on the interviewing process =D
Let me know when you have the results. I have my fingers crossed for you ;)
That video is amazing! Thank you, it was a very beautiful explanation. The only thing I changed from your sample was the material UI component because I use Tailwind in my project so I had to add the ErrorMessage component to showing the validation messages with the TW style classes. But the logic is simple and clear to understand. Won a subscriber already!
Thank you very much Tom =D
I have to try tailwind, there's a lot of good words about it on the community, but I'm so in love with Material-UI that I think it will be hard to leave material-ui behind =D eheheh
This video is gold!!! how have I not came across your channel before, I DONT KNOW! :D
Thank you 😍😍😍
@@BrunoAntunesPT quick question, why did you pass onSubmit={async (values, helpers) ? i cantr see 'helpers' args being used anywhere? thank you again, Bruno :)
It's just the signature of the function 🙂
Finalmente, o mestre tá de volta!! Muito obrigado, vídeo incrível como sempre!
😂😂 ahahah Muito Obrigado Rodolpho 😁😁
Gostarias que eu fizesse algum video antes de iniciar (ou durante) a serie "React.js for beginners"? Todas as sugestões sao muito bem vindas 😍😍
@@BrunoAntunesPT Seria sensacional!! Se puder fazer o React junto com o Typescript então, melhor ainda!!
Wow, I came for some quick answers for but left as a better coder having a better grasp of creating custom wrappers and using types. Thank you!
Bruno this is a great tutorial. I am studying all of these technologies and this video is exactly what I needed Thank you brother!!!
Thank you, I'm glad it was helpful! 😊
If you want more in-dept details about formik and yup, in this video description you can find a link to another video Formik+Yup video (ruclips.net/video/kYyaJyTLjpk/видео.html).
I hope you find that one useful 😍
Such valuable information should be thanked! Great work Bruno
Thank you very much Martin 😍
Gosh! this was such a savior for me..thank you for taking the time to share :)
I'm happy I could help 😀 thank you Surabhi 😊
Thank you Bruno, you are a very pleasant teacher to learn from.
Thank you very much Noah 😀😀
Super simple explanation and we need more React Js Examples Tutorials. Can we expect *React Form Hook* Tutorials?
Thank you.
I'm using both at the moment - for some reason my brain still prefer formik (probably because I'm using it for soooo long), but I can see clearly why someone would prefer form-hook.
Someday in a not so distant future I'll drop a video using form-hook 😅😅
I was not aware about YUP, thank you a lot! looks really good!
Thank you very much my friend 😀😀😀
Excellent! Just subscribed. Would love to see more videos on material-ui and react.
Thank you 😍 I'll do material videos by the end of the year or worst case January 🙂 this last months have been very hard to find time to record, sorry 😔
Danke!
Hi Bruno, thanks for your classes. I follow you and in Formik + MaterialUI it's very easy to learn from you. Best Regards !!
Thank you Vittorio 😀 very happy to read that 😍
@@BrunoAntunesPT I was working with formik-material-ui switch and in the new versione if the type is missing in the attribute it does not work, in the 3 major release. Thanks
@@BrunoAntunesPT I follow you very often, Best Regards !!
It's normal that from time to time things change a little bit
that's actually very healthy, it means they are innovating and improving 😀
Oh how i have been waiting. Super excited for this
😊😊😊😊
This is the video you requested a while ago! I was about to say your name during the video, but I didn't knew if you would be upset if I mention you =D eheheh
@@BrunoAntunesPT really appreciate that. it was great seeing how it can be done. Wondering whats next. Gonna keep using it (like the rest of your videos) as a reference
It was great fun creating this one =D
Thank you very much for the suggestion =D
@UCyU0mNYdX9EHY7rc5yucIZA u know the pick bit is that only for Typscript or can it be done using just JavaScript
Sorry I missed your comment =(
Yes, in Typescript you quite a few nice helpers - I use Omit and Pick quite a lot =D
I love your style of teaching. Thanks for the help
Thank you for watching the video 😀😀
Wow Bruno, this is awsome !! Thx for sharing those advanced contents :)
Thank you Cedric, I'm very happy you found it helpful 😀😀
Best formik video till date and very useful and informative video series 👍👍👍
So nice of you saying that! Thank you very very very much =D
You did great job 👍 , you are talented instructor by the way 👍
Thank you very much Ibrahim ❤️ your comment made me feel incredibly happy 😊 thank you my friend ❤️❤️❤️
exactly what I needed, great vid. subscribed
Thank you 😍😍
Hey Bruno, thanks for this video i learned lots from this video as beginners
That's awesome to read, thank you very much ❤️
your explanation is incredible
Thank you very much Moises 😀😀
This was a great walkthrough. Thank you for making this! Quick question. How would you handle the multi-step form if every field resided in its own component? Would you import the FormkiStep into each component? Looking at the code, it seems pretty straightforward when all of the form fields reside in the same file, but I'm not sure how to tackle this when I'm dealing with 12+ form fields all encapsulated in their own components.
Thanks!
Thank you ❤️❤️❤️
This is really awesome man!
Thank you so much for this, really helped me a lot!!
Amazing 😀😀😀 thank you for the feedback my friend 😍
Hello bruno , just a suggestion. Add the video playlist link to every video description ideally on the very top.
Will probably also help with getting some more views . Greetings
Thank you very very very much for the suggestion Medy 😍😍
I'm really new to this youtube thing - Please, if you have more suggestions let me know. Tonight I'll update all the videos to have pointers to the playlist they belong to 😊😊
@@BrunoAntunesPTure welcome.
btw your diagrams are aweseome ;) to exlain the concepts.
I can totally see your experience shining through making it easy for you explaining complex topics in a simple way.
If you enjoy them. Maybe target some even more beginner topics with potential bigger reach... just a thought
You could also split up some videos ... to have less intimidating video length ... 10 - 20 minutes ... though I feel like.. once more ppl know you this wont be an issue
I clicked anyways^^ ...
Authentication is currently nagging me abit.
Im still lacking a broader view what to choose for authentication... it seems like any of that stuff has its flaws ...
Im very interstied in this because I care about having at least basic security for when I built some stuff....
. so as a beginner I would like to have " autetnication that isnt too hard to implement but for the most part safe"
I found some basic aproaches here.
But I still wonder if one should bother when there are options like firebase or strapi...
In case you actually start building a real project. What would you pick for a small project .. and breath somewhat easy knowing that the next guy who just knows a tad about authentication cant crack open your system xD ? !
So in a sense I want smth where you can say "this should be somewhat safe"... for my first projects xD
Anyway Im excited to see more.
Greetings
All your tips are amazing my friend!!! Thank you very very much, you are amazing ♥️
Regarding authentication, in order to be easy, probably the best bet is to use passport with Facebook /Google/twitter autentication when possible. I have to prepare a video like that in the future. I think it will help people to have a secure and easy authentication system 😍😍😍
Once again you are amazing my friend, thank you, thank you ♥️♥️
@@BrunoAntunesPT Nah man you are amazing :D...
My advice may not help much:D ... But mabye worth a try.
A video to demontrate " what is a basic -/ secure" authetnication ... would be great.
I mean for starters anything that works is fine .... but I have that little voice that is asking "but what if you app grows even a little " can I trust my own authentication or should I better trust google or firebase xD ...
Greetings
Sorry Medy, for some reason I lost your comment =(
Honestly lately I have been working quite a lot with auth providers like Facebook and Google. Looking into my analytics, I'm really really really tempted to completely remove my custom authentication system (almost nobody is creating accounts with email+password). I'll do some more analysis on this =D
This is awesome, keep up the good work!!!
Thank you Raja 😀
Very well explained. Thanks for making this video. May I ask how long it took you to get to this level of experience? Thanks
Great tutorial. Learned lot. Thank you so much Bruno..
Thank you very much my friend 😍😍
That was exactly what I needed.
Awesome!! =D
Wow, that was exactly I was looking for, explanations were perfect. I need one suggestion is that how can I transform into jsx? I am new in react. :D
Thank you my friend 😍😍
Yes, it's very possible to have just JavaScript without any TypeScript for this example!
I created this codesandbox in pure JavaScript: codesandbox.io/s/dry-architecture-kfmd7?file=/src/pages/index.js
Let me know if that is what you were looking for 😃😃
If you are learning and you don't mind, I'll give you a tip 😃
When you see any typescript code that you don't know how to convert into JavaScript, you can put it over here: tsplay.dev/oN5A9N
One the left you can see my typescript code (from this video), on the right, the "converted" JavaScript code 😃
@@BrunoAntunesPT Thanks a lot, much appreciated!! Can we validate the forms on each step ? Will breaking forms into for multiple step help?
@@BrunoAntunesPT Will surely keep this in mind!! Thanks a lot!!
Are you asking about having different components for each step?
If that's the question, absolutely, it will make the code much easier to read 😀
Regarding the validation we have validation per step. You can also have global validation but having it per step seems easier to read for me 😅
Sorry if I misunderstood your question 😅😅😅
This was incredibly helpful. Thank you so much.
Thank you 😍
Thank you so much, i am stuck with these kin'a things
Happy to help
Loved this tutorial. Can you show us how to introduce options between two textfields? Where the user can choose either a specific textfield or they can choose the other textfields to fill.
Thank you my friend =)
I don't know if I fully understood your example. If you can give me a practical example, probably it will be easier for me to understand =)
@@BrunoAntunesPT imagine if there's a website which allows us to POST books. Imagine if we're trying to write a book from scratch. We have to give it a title for the first time. And then move on. But if we've already written somepart and then we're returning later on, so now we have to choose from the available books (so that we can carry on from where we left of) I hope I didn't make this more confusing 😅
I think I got even more confused now 😅😅😅 probably because it's weekend and my brain is lazy 😂😂
Do you have any application doing that? If you can send me the url I think it will be the easiest way for my lazy brain to understand it 😅😅
@@BrunoAntunesPT okay so imagine if there's an option to either choose from an available list or add a new one to the list. The user can choose only one option. The one he chooses will change the state
Ahh you want some fields validating some other fields, cross-field validation?
Can you just watch the first 35 seconds of this video to let me know if this is what you want? ruclips.net/video/kYyaJyTLjpk/видео.html
Thank you, it was a very beautiful explanation
Thank you 🥳🙂
Thank you Bruno, this video helped me so much. Thank You
I'm very happy it was helpful 😀😀 thank you my friend 😍😍
Man I liked your way
Thank you very much 😍😍
Thanks Bruno! Amazing tutorial! I am just having an issue, that after the first step Formik sets all fields to touched, so if I have a few fields in the second step as soon as I write in one of them all the validations show up on the other fields, I assume since they are all touched. Any solution? thanks.
Thank you very much =D
Yes, did you check my repository?
I did a commit at the time in the repository to fix that small issue that I missed while recording.
The specific commit is this one: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/c7924e8b7d80d24f7aa227cae1c52f554ff503a5
Let me know if it fixes your issue :)
@@BrunoAntunesPT Thanks! I didn't know you could use setTouched with an empty object to reset. I ended up using resetForm with the old values, but this is much better. Really appreciate your quick reply. subscribed!
Thank you my friend 😀
Thank you! This was a rare video with grateful informations. I just have a question that how we use formik props like 'setFieldValue' or 'values' on parent. Forgive me for this question, since I am junior.
I figured a way out but I didn't test it fully
Wrapping FormikStep with FormikPropsProvider and passing props as function may work
{(props)=> 'child components field etc'}
{
return React.createElement(
FormikProvider,
{
value: formik,
},
children(formik)
);
});
Thank you very much :D Sorry for the delay replying! I'm very happy you found a solution =D
It’s just brilliant!
Thank you 😀
Superb tutorial Sir! 👏
Thank you soo much Kapeesh 😀😀❤️
Hey, Bruno, thanks for the awesome video!!! I have a question. Can I pass the 'touched' and 'errors' props into ? I wish to define classNames in depend on 'touched' property, and then highlight the fields with errors.
Thank you 😀
Formik provides a hook called useFormikContext 😀
I think that's all you need inside your formik step plus a render prop on the children of the formik step 😊
@@BrunoAntunesPT thanks!
Hi Bruno, amazing video! Is it possibly to make it so that pressing the browser back button does the same as the back button on the form (if we somehow make steps have different URLs)? Or I can only show the users a popup so they confirm that they want to leave?
Thank you 😍
Yes, it's possible, you would would have to "connect" with your router system, which is a bit annoying, but possible 😊
@@BrunoAntunesPT Thanks for the fast answer! Could you please lead me into the right direction with next router?
I would do the following:
1 - create a page: src/pages/my-page/[stepNumber].tsx
2 - take advantage of shallow routing - nextjs.org/docs/routing/shallow-routing
3 - every time you change step do something like router.push("/my-page/3", undefined, {shallow:true});
I did an example using shallow in the car trader app video 4 that might be useful to understand the concept. Video playlist: ruclips.net/p/PLYSZyzpwBEWTt-0uuxAcSrJmMlnD9Yuz3
@@BrunoAntunesPT Thank you soo much!
Thanks so much! The code is so nice and clean 🙏
Cool video what keyboard do you use? it sounds so nice :D
This one was recorded directly on my Dell XPS 15 laptop, no external keyboard 🙂
This component is really awesome, but i has a problem. I need to access formik context for a depend select combos. For example, i have 3 levels, country, state and city, in each level i need to access my api to fill select combos. I dont know how to use handlechange (i am try handleblur) and i dont know how to use formik context to access country and state for fetch list of cities. Any help please.
Thank you very much =D
You are lucky today =D I already have a branch on that repository using the formik context, to show a full name on other step :)
That branch is here: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c/src/pages/index.tsx#L167
"The magic" happens in the last 10 lines of that file :)
@@BrunoAntunesPT Really thank you very much. He didn't expect you to respond so quickly. Very thankful!!!
I'm happy I could help 😍😍
Hi Bruno! Great video, as usual!!
I leave a request in case you need ideas: how to handle user authentication in the server side in order to avoid flickering.
I currently use getserversideprops for each route that I want to "protect", but maybe you know of a better way :)
Thank you =D
What do you mean by flickering? Flickering between you going to the login page and other pages? Or between normal pages?
Sorry, I'm probably missing something :)
@@BrunoAntunesPT Hi Bruno! Thanks for replying!!
I'll try to explain myself better: if we have the "/signin" route and I am already signed in, If I don't use the getServerSideProps to know if the user is already logged in, the server will render the signin form, and when the client loads it will redirect or show something else like "you are already logged in", thus provoking the flickering.
This would happen in all the user protected routes. Then the question is what would the better aproach/pattern to solve this problem about the logged in user.
Thank you again for the answer and for all the videos, they are top-notch material!!!
If you don't do anything server side (getServerSideProps or getInitialProps) and navigate to /signin you'll be shown that page.
A few (milli)seconds later your javascript finishes downloading, parsing and runs....
if you are not logged on nothing happens, but if you are already logged in it shows that message, hence you seeing the flickering. You saw signin page and now the new message.
If you rely only on javascript client side you'll have that 😊
Hello, thanks for this tutorial
Please what are the dependencies required? Thanks
The GitHub URL is in the video description 🙂
Hey Bruno, loved the video! Any chance a license (e.g. MIT) can be added to the github repo because I want to be respectful of your code and would like to use it for one of my projects! Thanks :)
Thank you very much Yousef!!!
Yes, of course!!! All my code is public and you can do what you want with it =D
I added a License.MD (MIT) to my 2 last repositories =D
If you want I can add it to any other repository =)
Bruno Antunes Thank you so much Bruno!!! I also just subbed 👍🏼
Double thank you, Yousef 😍😍
hey bro, thanck you very much, amazing work
Thank you 😍😍
Hi Bruno, I am back here, I followed your NextJS tutorial last time ;) thank you. I am wondering if maybe it is feasible to have a table with search bars and filtering in one of the step ? or is it only for small forms ? thanks
Thank you Marie 😀😀
I don't see any performance problem with that approach as long as you have filtering and pagination server side 😊😊
@@BrunoAntunesPT thank you !! yep I do. Thank you so much for your quick response :) last time you really helped us with next, my team and I scored a good grade at our coursework !! thank youuuu
That's awesome 😀😀 I'm very happy you all were able to score a nice grade 😍😍
Thank you soooo sooo much for letting me know that experience, it really makes me feel happy 😀
@@BrunoAntunesPT :) One more question, sorry to spam you with question but I was wondering can I use Javascript instead of typescript ?
No worries 😀
Yes, you can use JavaScript, even though I would recommend TypeScript 😀😀😀
If you want to see this video's code in JavaScript, please check this: tsplay.dev/oN5A9N
PS - You can put any typescript code there, and it "gives" you the javascript code. I hope this helps 😀
Great tutorial! However, how can i validate each step using server-side validation? For example, when i enter the email on the first step and i want to check if it already exists on the database.
Thank you 😍
You can have async validators with yup. Let me copy one of their documentation examples:
// or make it async by returning a promise
let asyncJimmySchema = string().test(
'is-jimmy',
'${path} is not Jimmy',
async (value, testContext) => (await fetch('/is-jimmy/' + value)).responseText === 'true',
});
awesome. Would you be able to show how to build a form with multiple sections (i.e a scrollable form)
Thank you 😍
Do you have any example of an application with those scrollable forms? I think I'm not familiar with that ux concept 😊
@@BrunoAntunesPT here is an example: assets.littlerealestate.com.au/documents/NSW-Full-Tenancy-Application-Form-January-2017.pdf?mtime=20170130165210
You want to be able to print it to a PDF and have one section per page? Sorry I'm a very confused right now 😅
If you want to build the different sections on a page and allow them to grow as you add more, then you don't need to do anything, meaning no special code on your side for that to happen 😊
@@BrunoAntunesPT to keep it simple, how to achieve the layout in page 2 of the pdf (Primary Contact) in Formik, which should be responsive. If we could push the form data to mongodb, that would be super cool.
The layout is all css, zero to do with formik or any form library 😊
Thank you very much @
Bruno Antunes. Can we include file input?
Thank you my friend 😀
I have a video about file uploads with progress bars and everything: ruclips.net/video/MAw0lQKqjRA/видео.html
Let me know if that video has all you need 😍
@@BrunoAntunesPT Thank you so much... can we concatenate two videos
I want to have a multiStep form that my Third step is the Multiple File Upload using (DropZone)
Codesandbox will be better.
It is really urgent sir. Thank you in advance!!!
@@BrunoAntunesPT Or better still, if you could update your existing repo with DropZone as the last Step
Javascript version please
Yes, you can concatenate the two even on a codesandbox if you prefer 😊
Regarding moving it to javascript you can go to the typescript playground and it will show the resulting javascript from your typescript file 😊
If you have any doubt, let me know 😊
@@BrunoAntunesPT Thank you very much, i got everything working
Hey Bruno! Awesome tutorial, as always.
I have one question:
validationSchema={currentChild.props.validationSchema}
is what you have written.
currentChild has been typed like this: const currentChild = childrenArray[step] as React.ElementType;
and FormikStepProps give access to the following properties:
export interface FormikStepProps extends Pick {
}
So, my IDE complains on the first line of code I've written in this answer ( the validationSchema= ...) TS2339: Property 'props' does not exist on type 'ElementType'. Property 'props' does not exist on type '"symbol"'
I really like the "Pick" variant, coz it helps other developers instantly knowing what they can access. So is there a way to keep it even when accessing props like this? Adding props to Pick defeats its whole purpose
Thank you my friend 😀😀
I don't get any warning/error using vscode. Which editor/ide are you using?
BTW executing "npm run build" do you get any error/warning? That is the "source of truth" 😊
@@BrunoAntunesPT build fails because of this.
I made a public repo for you to check it out: github.com/Leviathan91/Examples/tree/master/formik/formik-multistep
I am using IntellIJ IDEA, because of the the java background / android programming I'd really like to keep it :)
I don't have access to a laptop right now, but looking into your code and mine you are using ElementType in the first 4 lines of FormikStepper and I'm using ReactElement.
I'm almost sure if you change it to ReactElement instead of ElementType you'll solve the issue 😀
Let me know if it worked out my friend 😍
Thank you Bruno! This was a great tutorial.
One thing though, when I go to type in the first name field, I get the following warning in the console:
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Any idea what could be causing it?
Thank you Steve =D
Usually what you are seeing is because you are setting the initialValues with undefined (or null).
For example: will trigger the warning you are talking about. If you have you shouldn't see any warning/error.
If you clone directly my repository, for example using codesandbox, you'll not get the warning :) ==> githubbox.com/bmvantunes/youtube-2020-june-multi-step-form-formik
Let me know if this fixed it, otherwise it can be something else (if you can share the code you are doing, that will help as well) =D
@@BrunoAntunesPT My initialValues looks exactly the same as yours 🤷🏾♂️
I've put my code in a gist here: gist.github.com/Steve-Reid/9d3481e0c8b591a8065567e7448e51d8
Thanks for your help 👍🏾
I think I spot the error =D
On line 41 where you have:
name="firstname"
change it to be:
name="firstName"
in the initialValues you have "firstName" (capitalized N) and in line 41 "firstname" (without N being capitalized) =)
Give it a try and let me know if the error is gone =D
@@BrunoAntunesPT Yep! That fixed it! You are the man! 🎉
Great .. please provide more project like this.Thank you
Thank you!! 😊
I will bring more content like this in the future 😎😎
@ 2:37 - passing inital values to formik.... So I have to write the initial values as an html attribute on the formik component. Will i have to pass the initial values for all my steps? What if there are 20 steps? Do i put 20 initial values?
more specificity to the question:
What if i have a dynamic step that is generated based on how a user interacts with an optional element like a checkbox? i.e. a future FormikStep that depends on the earlier choice/data input of the user? Like if they choose option 1&3 in a checkbox, then there are dynamically generated steps they have to complete based on those two specific selections. Do I have to write out all possible scenarios in the initial values on the Formik component?
The answer is yes, you need to define every single initial value (even if an empty string). That is actually more to do with react than with Formik itself :)
From the formik documentation:
```````
initialValues: Values
Initial field values of the form, Formik will make these values available to render methods component as values.
Even if your form is empty by default, you must initialize all fields with initial values otherwise React will throw an error saying that you have changed an input from uncontrolled to controlled.
```````
Link for this sentence in the docs: formik.org/docs/api/formik#initialvalues-values
I hope this helps :)
I appreciate your tutorial
Thank you 😀
Hello Bruno, What is your opinion about react hook form ? I find it more satisfying, if you think its great tool and if it is convenient could you make one video on it ?
I think they are really great libraries to work with forms.
Currently I prefer to use formik, mainly because I'm used to it - this can change in a few months as I get more familiar with react hook form 😀
This also means you can probably expect a video about it in the next 2/3 months as/if my opinion changes 😀
You are amazing my friend, this was really really helpful!
I wanted to ask you if it is possible to add a custom onClick() listener to a formik field without overriding the default formik one?
can I ask why you want to add an onclick? 🙂 Usually there are better ways than using onClick
That being said, Formik doesn't use onclick. They use value, onchange, onblur etc, but no onclick 🙂
So if you add an onclick you should be good 🙂
@@BrunoAntunesPT I need to show a select component only when I click on a specific radio button and I thought if add an onclick function on the radio button that toggles the values of a certain state hook I can achieve that, you think there's an easier way?
I had almost a book written here in the comments trying to explain why using an onclick in that scenario would be a bad idea, but then I decided to delete my gigantic comment and create a demo for you without the onclick =D
The demo also does sanitization, meaning if you select an option in the dropdown and then select another option in the radio button, after you submit you end up with a value WITHOUT the dropdown value (if you don't like that, just delete the if inside the onSubmit). I think I put every single detail in this codesandbox and in the end it was faster than my "book" and hopefully gives you much more value than my "book" xD
codesandbox.io/s/elated-shape-m681g?file=/src/App.js
@@BrunoAntunesPT You are amazing my friend, this was very very helpful, thanks
Happy I could help 🙂
Great tutorial! THANKS!
I'm glad you enjoyed it! =D
Bruno, thank's a mil for this tutorial. Im implementing this stepper in a signup flow that has three steps: signup w/ auth, choose a plan and submit payment. I'm stuck on the first step as I need to add the values of the input fields to state but for whatever reason, the "onChange" attribute isn't doing anything for me. Any suggestions?
Thank you Tony,
If you use onChange you'll most probably have problems - because that's also what formik is using behind the scenes :)
You can try another approach. On line 28 you have:
```
```
Try to replace that line by the following JSX:
```
{ console.log('hello', evt.target.value) }}}
label="First Name"
/>
```
Now every single time you time a new key in First Name you'll console.log hello + the current value in the input.
Let me know if it worked for you =)
Let me also know if that's what you were looking for =D
@@BrunoAntunesPT Man, right on the money!!! Thanks again! Me => 5hrs, Bruno => 5 min
And thanks too for the super quick response!
It's my pleasure to help my friend 😍😍😍
@@BrunoAntunesPT thank you both of you. Just saved me hours!
pure gold, thx!
Manuel 😍😍 Thank you 😀😀
Hi. Will there be a video about NextJs with state manager? React Context or Redux? That would be great.
Redux I'm no longer using it, so most probably there won't be a video about something I no longer recommend 😊
Regarding context we might do one sooner or later 😉
Great video as always. I have one question, the validation on each step is great and working fine for UI side but how to deal with serverside validation which doesn't care about steps and only cares about whole form. For example, you submit to the server and it gives you error on field email as "Email already exists", and email field is in first step of our multi step form, how to locate to exactly that email field when there's an error from server side?
Thank you my friend 😊
In those cases I think async validation will help you for the email example 😊
In case you don't want to use it, you have two options. Keep a map of what field is in what step and when you get errors go to that step (or the step of the first error)
Some apps I also saw expanding all the steps into one when that happens, even tho, I don't love that 😅😅
Very helpful tutorial Bruno, thanks a million. I have a quick question, please can you share how to use useFormikContext to pass the touched and errors value to the FormikStep and how to access it in FormikStep. Thanks once again.
If you have this class on udemy, I will definitely give u 5 stars.
Thank you Justin 😀
Actually I have never used udemy xD
Hey Bruno, thank you so much for this tutorial. That's exactly what i was looking for. Everhting works but i have a problem. I use async validation on change. But when i want to go to the next step the async validation runs again although isValid is true. Unfortunately, I have not yet found a way to work around this. Do you have an ideas how can i solve this ux issue?
Thank you very much 😍
Async validations will run on submit. Changing the steps we are submitting the form, making the validators run. Have you found a solution? 😊
@@BrunoAntunesPT yeah, i changed the button type dynamic. So on the first steps, the button type is button and only on the last step, the button type is submit. In this way, the onSubmit function runs only on the last step 👍
That can give you some edge cases 😊 I'm not 100% sure of what I'll say next, but please test to avoid problems 😅😅😅
One possible problem that comes to mind is if the user clicks on the next page before doing anything else on the page. At that stage all fields will be valid and because you are not submitting the form, the sync validation will not run, so the user will navigate to the next page with validation errors, which we should not allow 😊
@@BrunoAntunesPT thanks Bruno, but this case can not happen with me, because I disabled the submit button with the dirty, isValid property 😅
If you already took care of that use case, I'm not thinking about other problems (currently) 😅 they might exist but at least I can't think about any right now 😅😅😅
This is very useful, can you please tell how can we use form values from steps ? For example, how first and last name from Form Fields can be used to show formatted Full Name in same form ?
Regards.
Thank you my friend =D
I ended up coding one possible solution at github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c
Let me know if this is helpful - It shows on step 2 and 3 the message "Hello, {firstName} {lastName}!" =)
PS - You have at least 2 other possible ways to implement this that will be cleaner in the long run, but this one is probably the simplest if you intend to use it only once or twice :)
I really liked your video and it is great help. I would like to ask if it is possible to access values in formik step ? I would like to conditionally render field if user have selected a checkbox on previous step.
Thank you 😀
It is possible, but in order to make that formik step component support render props, you'll make it extremely hard to develop - I dare to say very very very very very hard 😅😅😅😅
If you really need to use steps and access values for a field, then the very easy option is to create a custom field, which you can then access the formik values by using useFormikContext hook.
I have a branch on the repository showing that (scroll to the very bottom of this commit 😊) github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c
I hope it helps you 😊
@@BrunoAntunesPT you are star !! It worked
@@BrunoAntunesPT I would like to disable submit or next button if the form is invalid, I have replaced submit button disabled property "!(isValid && dirty)" and it works fine but if i am on step 2 and form is invalid but if user click back to step 1 the next button here is disabled. How can i keep it enabled as the step is valid. Let me know if you prefer me to share example code.
Thank you 😍😍
Yes if you can share a codesandbox/github it is usually the easier way for me to help 😀😀
Sorry for delay, Here is the link to codesandbox - codesandbox.io/s/sharp-swirles-cmf3k
Replication Steps
1.) Step 1 - Enter firstName, lastName and click on Next
2.) Step 2 - Remove amount and you will notice Next button will be disabled.
3.) Click Back button to go back to Step 1
4.) Step 1 - The Next button is still disable even that step passed the validation.
Qn- How can i automatically enable next button on Step 1 on Back Button?
Bruno. Awesome as always!
I have followed this tutorial coding along, however typescript is shouting at me saying :
"Property 'props' does not exist on type 'ElementType'. Property 'props' does not exist on type '"symbol"'.
for this line:
```validationSchema={currentChild.props.validationSchema}```
This does not stop it from working as desired though ... Can you please explain why this is so? Checking my console, thr props property is there on currentStep. So I just don't get the reason why typescript is giving that bug
Thank you Samson 😍😍
If you check on 25:55 I have an "orange floating label" saying that it shouldn't be React.ElementType but React.ReactElement. I also did one more commit in the repo before launching the video with that small change 😊😊
Let me know if this helps. I hope it does help 😊
Actually I checked again and it is a "blue floating label", not orange 😂😂😂
@@BrunoAntunesPT hahaha ... I saw the label, and tried it out by changing *React.ElementType* to *React.Element* but got an error *Namespace 'React' has no exported member 'Element'.ts(2694)*
Oh... Good Job Samson ...My own bug, its *React.ReactElement*
😂😂😂 You are not alone my friend! I make mistakes every single minute of my life, coding or non coding related 😂😂😂
Obrigado, Bruno. Entendi perfeitamente. Abraços do Brasil.
Muito obrigado Bruno 😁😁😁
Um grande abraço deste Bruno Português 😄😄
@@BrunoAntunesPT Sua explicação é realmente maravilhosa, parabéns pelo trabalho !
Muito obrigado Arthur 😀😍😍
I have a problem when I go back to a previous step , I lost the values that I made (only with checkbox field and autocomplete field)
Without seeing your code I don't know what you are doing wrong 🙂 can you share your code? - for example a GitHub repository or a codesandbox 🙂
thank you so much! I think i miss the source code, the one in github is typescript and in next.js?
Thank you 😊
At the end of each video I commit the code as is to github without any change 😊
In the video description I always have the link to the repository, in this case from the video description:
Github Repository: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik
I hope you find the code helpful/useful 😊
And yes the source code is in typescript 😊
thank you very much brother!!
Thank you 🤗
Very usefull as always. Thanks.
Thank you Luciano ❤️❤️
Hi Bruno, I heard in your videos that jss will be dismissed from material-ui for styling the pages. I understood that the jss will be replaced bt emotions ??? I'm not sure about what you said. Do you confirm that jss will be replaced by emotions ?? Thanks in advance
Yes, by emotion 😊
You can check the following two issues:
github.com/mui-org/material-ui/issues/24405
And
github.com/mui-org/material-ui/issues/22342
Good job! Nice video!
Thank you very much Filip 😀😀
I am having issues submitting my form with the async await in the formik stepper. It keeps giving me a 'Cant perform a React State update on an unmounted component'
Depends how you are doing it 😊 can you share your code on a codesandbox to have a look?
You can also check on my repository that I'm using async await without any problem - github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/12a03018c4072ce75c7138412b9a059966b6dae5/src/pages/index.tsx#L22
@@BrunoAntunesPT I got it to work. It was something else I had going on in my submit form. Thanks for the response
Question though, how can we add in the formik bag? I want to for example conditionally render a field if the millionaire checkbox if true but I am unable to pull out the value the way I normally would by using something like formik.props.values
Awesome 😍
taking into account we can't grab the values, because the steps need the children, your best option will be this github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c/src/pages/index.tsx#L68
That component implementation is the last 5 lines of the file, where you can get the values by formik context 😊
@@BrunoAntunesPT Thank you again Bruno for all the help! Just subscribed and sent a small thanks as well!
@@RenM908 Thank you very very much my friend ❤️❤️❤️
Hi Bruno, thanks for an amazing tutorial, this helped a lot!
I have one question: How do we render our values in our form? I'm trying to make a wizard for a webshop and the third step is to render the values people filled in (address), to check if they didn't make a mistake.
I checked the documentation and apparently we can put {({values}) => ()} around our Form. If I do this, nothing renders on my page. Do you have any idea how to fix this issue? (I'm pretty sure you have :D)
Thank in advance and keep up the good work!
Thank you mate 🙂
Yes you can do it. You are not the first one to ask for it, so at the time I created a branch in my repository to show the full name in steps 2 and 3 and that's exactly what you want 🙂
github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c
@@BrunoAntunesPT Thank you so much! I appreciate how you take the time to respond to questions and how fast you did it!
You are very welcome my friend 🙂
Usually I answer comments before and after work - you were lucky to ask something during one of my windows, otherwise I would only be able to answer tonight 😅😋😋
@@BrunoAntunesPT Haha, well lucky me I guess :D! Nevertheless thanks a million, I got it working thanks to your awesome tutorials!
Nice video!
i work with react since few weeks. I wanna do the same work only with create-react-app. It don't like typescript, how can i do this?
Thank you Sylvain :)
Yes, it's possible to have "just JavaScript" without any TypeScript for this code!
I put my code into the typescript language playground with the compile flags needed - tsplay.dev/oN5A9N
You should be able to open that URL and copy paste the right side (JavaScript).
I also created this codesandbox in pure JavaScript if you prefer: codesandbox.io/s/dry-architecture-kfmd7?file=/src/pages/index.js
Let me know if it helps my friend =)
@@BrunoAntunesPT Perfect :)! I ll try and hope it ll be good :)
@@sylvainelineau8393 :) Let me know if you have any problems :)
@@BrunoAntunesPT I created my multistepform :) with your video! But still one display dysfunction. How I can "jump" 1 or 2 step no necessary to go directly to the last one. I saw that it s the props active/completed that control display or not.
@@sylvainelineau8393 awesome. 😀
Yes the property step controls in which step you'll navigate to 😊 if instead of adding 1 you add 2, it will jump 2 steps 😊
Hi bruno, greta explain, great job. I have a problem?. I export the proyect only for study. I upload to my hosting, and doest work the stepp. Could you help me, please?
Thank you =)
I did a deploy to vercel and it's working as in localhost: youtube-2020-june-multi-step-form-formik.vercel.app/
What's the message you are getting on your hosting platform?
@@BrunoAntunesPT thank you, you are the best
Superb!
Thank you 😍
Is there a reason you are using component={TextField} instead of as={TextField} in this video?
That's because we are using formik-material-ui 😃
You can have a look into their documentation here: stackworx.github.io/formik-material-ui/docs/guide/getting-started
Thanks Bruno. I am doing similar thing but my fields of Formik are dynamic, i.e. they are dictated on the fly by a json, in that case, children of FormikStepper are not getting inherited properly in the wrapper. Can you please suggest the solution if my form doesn't have fixed static fields?
Sorry, I am a bit confused =X
Do you mind to share a small codesandbox with your code? That way I think it will be easier to understand what you mean and help you with a solution :)
again well explained tutorial
Thank you very much 😍😍
can this tutorial be used in a nextjs app context? i.e can i use nextjs and (basically) stick to the tutorial?
oops! this question is answered: the github repo clearly says this is a next.js project bootstrapped with create-next-app!
Yes, you are right 😃
The project is done on Next.js (Somewhere in the comments I already put this code (copy paste) in a create-react-app - it also works on "normal" react with create-react-app) 😊