Amazing tutorial Shawn!! Just want to let the people know that if you want to use an action function at the home directory "/", make sure NOT TO USE "index" as it does not work. Took me few hours to resolve this issue phew. Just use the same old path="/" and all set!
i've noticed that whenever i visit a route that contain a loader or when i submit using the Form that trigger the action function, the parent component re-render twice, first when the Form is submitted / loader is running and second when the URL is finally modified after loader / action finished with the async. how do you prevent any performance issue because of this?
Wouldn't {data && {data.error}} by itself have been enough? Since if you're returning the error message with the object, then you would need to just check if you have the object, knowing the error comes by default with it? I tested it and it works as well. Unless there's some kind of context/bigger situation which I'm not grasping and which would explain why you need to check if you have the property "error" as well on it?
React router is kicking me really hard I just barely learned basic React and did my first project in a very beginner way but was advancing switched to routers because I was using prop-drilling and using stupid shortcuts to render dynamically, and now i'm totally lost I already wasn't that talented in Js and React but I was doing just fine... but now..... Your tutorials are awesome, dont get me wrong!
I don't know how experienced you are as a programmer but don't be discouraged. This is pretty much a cycle that you will go through over and over again: New topic - > Your Lost -> You Learn ... and repeat. Different topic's stages will take longer or shorter depending on difficulty and your experience level. However, with each new topic learned in the same area, the cycles will get easier. The trick is to recognise that you have been through a similar thing before and are likely to pull through it again. I'm willing to bet you were pretty lost the first time you looked at React code too.
@@pkhenderson5966 thank you for the kind words Well it seemed to go pretty fine React itself obv i'm still a novice at it, but I kinda made it work for what i needed to. Anyway, I spent a full day or 2 dwelling into tutorials until I kinda learned some patterns and recognised I was trying to fit something more complicated into what I needed to do Basically it was a bad general design for the entire app. Still it was just exercise so, being good wasn't actually my main focus. Anyway I sort it out, but I do need to learn a lot of things mostly on how to design and think before even starting to make a mess
I'm studying coding on my own since last year, January. There are moments when you feel like this ain't for you, but trust me you got this man, when things get tough just take a break, 5-10 days. That's what I did, I took a one-month break from coding, learning UI/UX, then when I came back to code everything just clicked, and I'm more calmer when coding and don't rush and get overwhelmed when things go wrong. Just keep going, and I truly believe that you can do great things, keep up the working man!
@@halalkeksici6274 i started last year in January too! I kinda got better with it, but it's going slowly. I paused that and now I'm stuck at another thing for the current project...
That makes forms so much cleaner to use. Can we use context + actions to create a multi-step form wizard?? I’d love to stop using react form hook or formik just to use form wizards ootb
What if I want to make multiple POST requests? How would single action per page will handle it? If answer is multiple if-else on type of action, how can I pass this info if I am using useSubmit?Seems like so many corner cases
Great tutorial! Congrats and thanks! I have a question...Im using Form with a GET method, in am input with a button (route home)...the action is "/item", so I put in the route item a loader, so I can recieve the query param. It works like a charm, but if I search again inside the /item route, item is rendered twice...why is that happening? Thanks in advance
I just faced an issue i wanted to send non form data along with the form but the request that is made from the form component doesnt have the required value that i wanted to submit i really wanted to know if there is a good method i ahve make a hidden inut field and put the data i wanted to send through the actoion request but i dont think this is very convienent if we have too many data to attatch with the form value is there any soultion to it?
Very great content. But I'm having a little issue here. How can I upload a file with contentAction if the formData only give me the name of the file and not the content of the file? I've looked into the documentation but it's nowhere mention of this.
Why does the error message not clear the inputs? I thought you are rerendering this page when you say that page handles the action. Or is it that any route handling an action will simply run that action function, and it almost doesn't matter which route handles the action?
01. There's no logic in the action function which will erase the values of the form input elements. 02. Wiping out the values will lead to a bad user experience since the user will have to fill out the whole form again. 03. On correct input here the user is getting redirected to the home page so the Contact component is unmounted and thus, the input values within the form are automatically wiped out.
This is interesting. I'm doing my own backend w/validation, RTK query for submissions, and using useState to handle the req.body -- so don't know if I'll implement this ..... but definitely bookmarked. BTW I'm way deep into this clone project when I discovered this playlist and spent the last 1.5 days reconfiguring my whole route system 🥴
you are the best teacher i have seen so far in this field of programming.
The accent is a piece of art
Haha, thanks!
@NetNinja where did you get that accent? (Where are you from?)
I checked you playlist a few hours ago to check if you got added a video about actions and here its Thanks man
Hope it's helpful Mika!
Amazing tutorial Shawn!! Just want to let the people know that if you want to use an action function at the home directory "/", make sure NOT TO USE "index" as it does not work. Took me few hours to resolve this issue phew. Just use the same old path="/" and all set!
So cool, i feel like this makes front end validation so much easier
This is pure gold.
Hi Shaun. To get help with the convertion/mapping from a formData to an object, we could use the Object.fromEntries(:here the iterable) method. 🙌🙌
My bro you are very underrated 😇
this series is amazing
Thanks!
i've noticed that whenever i visit a route that contain a loader or when i submit using the Form that trigger the action function, the parent component re-render twice, first when the Form is submitted / loader is running and second when the URL is finally modified after loader / action finished with the async.
how do you prevent any performance issue because of this?
Wouldn't {data && {data.error}} by itself have been enough? Since if you're returning the error message with the object, then you would need to just check if you have the object, knowing the error comes by default with it? I tested it and it works as well. Unless there's some kind of context/bigger situation which I'm not grasping and which would explain why you need to check if you have the property "error" as well on it?
Brilliant!! Thank you so much
You're very welcome!
You're a legend sensei
what happens if i omit the action property in Form? will it then just find the closest action in the Route hierarchy ?
yes!
React router is kicking me really hard
I just barely learned basic React and did my first project in a very beginner way but was advancing
switched to routers because I was using prop-drilling and using stupid shortcuts to render dynamically, and now i'm totally lost
I already wasn't that talented in Js and React but I was doing just fine... but now.....
Your tutorials are awesome, dont get me wrong!
I don't know how experienced you are as a programmer but don't be discouraged.
This is pretty much a cycle that you will go through over and over again:
New topic - > Your Lost -> You Learn ... and repeat.
Different topic's stages will take longer or shorter depending on difficulty and your experience level. However, with each new topic learned in the same area, the cycles will get easier.
The trick is to recognise that you have been through a similar thing before and are likely to pull through it again. I'm willing to bet you were pretty lost the first time you looked at React code too.
@@pkhenderson5966 thank you for the kind words
Well it seemed to go pretty fine React itself
obv i'm still a novice at it, but I kinda made it work for what i needed to.
Anyway, I spent a full day or 2 dwelling into tutorials until I kinda learned some patterns and recognised I was trying to fit something more complicated into what I needed to do
Basically it was a bad general design for the entire app. Still it was just exercise so, being good wasn't actually my main focus.
Anyway I sort it out, but I do need to learn a lot of things mostly on how to design and think before even starting to make a mess
I'm studying coding on my own since last year, January.
There are moments when you feel like this ain't for you, but trust me you got this man, when things get tough just take a break, 5-10 days. That's what I did, I took a one-month break from coding, learning UI/UX, then when I came back to code everything just clicked, and I'm more calmer when coding and don't rush and get overwhelmed when things go wrong. Just keep going, and I truly believe that you can do great things, keep up the working man!
@@halalkeksici6274 i started last year in January too!
I kinda got better with it, but it's going slowly.
I paused that and now I'm stuck at another thing for the current project...
@@maxcharacterlimitreache- What's the project, we can maybe we could work on it as team and learn new stuff. You can add me on discord :)
automagically :))))))) , shaun..
is this can be useful with formik?
Thanks for this excellent explanation. How might one utilize this with a multi select input on a form? Is it possible? How?
What if I want to use Formik/yup?
That makes forms so much cleaner to use.
Can we use context + actions to create a multi-step form wizard??
I’d love to stop using react form hook or formik just to use form wizards ootb
Pure GEMS !
What if I want to make multiple POST requests? How would single action per page will handle it? If answer is multiple if-else on type of action, how can I pass this info if I am using useSubmit?Seems like so many corner cases
Great tutorial! Congrats and thanks! I have a question...Im using Form with a GET method, in am input with a button (route home)...the action is "/item", so I put in the route item a loader, so I can recieve the query param. It works like a charm, but if I search again inside the /item route, item is rendered twice...why is that happening? Thanks in advance
Thanks so much, cant miss the data.get("name")
I just faced an issue i wanted to send non form data along with the form but the request that is made from the form component doesnt have the required value that i wanted to submit i really wanted to know if there is a good method i ahve make a hidden inut field and put the data i wanted to send through the actoion request but i dont think this is very convienent if we have too many data to attatch with the form value is there any soultion to it?
Very great content.
But I'm having a little issue here.
How can I upload a file with contentAction if the formData only give me the name of the file and not the content of the file?
I've looked into the documentation but it's nowhere mention of this.
i'm redirect to the same page, and the value in input not clear, what should i do?
Cool, but how do you handle multiple forms if you can only use one action on a single route?
Thanks for your efforts Ninja, can you do something to do with useFetcher hook as a way of submitting data using checkbox
Awesome video +++++++++++ 😀
Sir must our action function be async?
Why does the error message not clear the inputs? I thought you are rerendering this page when you say that page handles the action. Or is it that any route handling an action will simply run that action function, and it almost doesn't matter which route handles the action?
01. There's no logic in the action function which will erase the values of the form input elements.
02. Wiping out the values will lead to a bad user experience since the user will have to fill out the whole form again.
03. On correct input here the user is getting redirected to the home page so the Contact component is unmounted and thus, the input values within the form are automatically wiped out.
How to integrate with react hook form?
🔥♥️
why use react router Form instead of React-hook Form beause in form we need validation and react hook form is best option isnt it?
does anyone here know, how do we use the react redux here?
ok
This is interesting. I'm doing my own backend w/validation, RTK query for submissions, and using useState to handle the req.body -- so don't know if I'll implement this ..... but definitely bookmarked. BTW I'm way deep into this clone project when I discovered this playlist and spent the last 1.5 days reconfiguring my whole route system 🥴