hey guys welcome back in this video i'm going to show you how you can send data from a form
in react to your laravel back-end using inertia js in the previous episode i showed you how to create
pages in react how to set up routing in laravel and then use inertia.js to send information
from your backend to react front-end and i'll leave a link in the description to that video
if you haven't seen it yet okay so let's jump in and look at our form i've set up a basic
three field form which would normally represent a user registration for instance
a name an email and a password okay so if we click register without filling out the form
we should see some validation errors like this now we can go ahead and complete the form
at email.com and we just make a super simple password and we click register and we get a
simple thank you page after registration okay so let's look at the code to see how this form
has been wired up okay so if we look at our rights file we've got three simple routes we've got a get
route to the register endpoint that maps to the create method in the register controller then
we've got a post method to the same register endpoint which maps to the store method of the
register controller and then a simple get method to the thank you endpoint which just basically
renders the inertia thank you page okay and if we look at our register controller we can
see the create method returns the inertia render method with our auth register form okay so let's
look at our store method next now it receives a custom form request which we'll look in a second
then it creates the user using the validated fields from that request then it returns a
redirect to the thank you route which then renders the thank you page you can see on the screen right
now and if we quickly look at our register request we can see that it requires the name the email and
the password with certain validation rules okay and that basically covers the laravel setup for
this form so let's go ahead and look at the react side of things all right now with regards to the
react side of things i created a register.tsx file which is going to be our page i created in the
auth folder which sits inside the pages folder now again if you're unsure why we follow this folder
structure please check out the description for the link to the video where i explain how to create
pages in react using inertia okay so our register page is a basic react functional component
we've got a form state to keep the values of the fields we submit we also have this use page hook
that is provided by inertia and we can use that to destructure the validation errors
that we receive once we submit this form to the laravel backer we also have a handle change
function which we've hooked up to the input fields on the form to the onchange event now
it receives the event details and then sets the form state according to the key and the
value and our last function is the handle submit function which we've linked up to the form on the
on submit event now in our handle submit function we receive the event and then we call the prevent
default this is to stop the form from refreshing the page once it is submitted all right so the
last thing we do in our handle submit method is posting our data to our register endpoint
and we do this by calling the inertia dot post method first parameter supplying the route and the
second parameter would be our information which in our case is our form state okay so the last
thing i want to show you is how to access or show the validation errors as mentioned earlier you can
access the errors variable by destructuring it out of the use page hawk supplied by inertia and then
simply access it via the field name like this it is.name not editor.email and errors.parcel
alright so let's test out this form one last time to make sure everything is still working
all our field validation is working and then we just fill out the fields
and password and we can see this email is already taken so we just make it a new one
register and thank you for registering and that's it for this episode guys
thank you so much for watching and see you in the next one