Original subtitles

[Maximilian} Now, before we add any logic

let's add some styling.

For this attached you find three files.

You'll find the Checkout.module.css file

which you should use to replace yours with it.

You will find a slightly updated Modal.module.css file

which you can use to replace yours and Checkout.js.

I also attached this file

because there I changed the Returned.js Xcode slightly.

For example, I wrapped the buttons in an extra div.

so you can either replace your Checkout.js file with mine

or at least replace your Returned.js Xcode with mine.

And once you did all of that

you should have a form that looks like this.

Now this is scrollable to make sure that we always

are able to squeeze everything onto this screen.

And of course, as always

you can tweak the styling and change this.

This is just some basic styling

which does the trick and looks okay I would say.

Now with that, if we, again, start from scratch

we can add something to the cart, click on order,

and then we get our form here.

And actually this should not be cut off.

So I will change height

to 19rem here on the form.

Slight oversight from my side.

But with that, we're good.

Now let's make sure

we do get the values the user entered.

We then validate them however we want.

And we then also either show an error message

if something's wrong with the entered data

or we submit it to a server.

Now let's start with getting the entered data.

For this, we got various options,

two main options to be precise.

We can either listen to every keystroke

gets the entered data and store it

in some state and update that state

with every keystroke or we get it once.

Once the overall form is submitted.

Now in the forms section, I showed you both

and I showed you various ways

of handling user input and validating it.

I showed all of that in great depth there.

Therefore here I'll keep it simpler.

I will not get the values with every keystroke.

Instead, I will use a reference

with useRef to get the values

only once the form is submitted.

So imports use ref from React

and then we can create a reference by calling useRef

and we'll get a reference for our name input, for example.

So our name input reference

which we get by calling useRef like this

and I'll do this four times to repeat it

for the street input,

for the postal code input, and for the city input.

And now we need to connect those refs

to the form elements here.

And for that, we can use the special ref prop, which we set

on the input elements to connect this first input

to the name input ref.

The second input here

to the street input ref.

The third input here to the postal code input ref

and the last input here to the city input ref.

Now these refs are connected and now we can use them

to read whatever the user entered

when the form is submitted.

Now for this, we've got our confirm handler here

and here we can then get the entered name

by reaching out to the name and put Ref.current.

It's always .current that gives you access

to the actual value stored

in the ref, in this case to the input element.

And since we now have access to an input element

we can access .value because every input element object

in JavaScript has a value property

that holds the actual value entered in that input element.

And we all repeated this or the entered straight

where we then use the streetInputRef to get the value.

And we repeated, whoops, that should be EnteredStreet.

We all the repeated for the enteredPostalCode

to use the postal code input ref.

And one last time we repeated

for the enteredCity to use the cityInputRef value.

And now we can validate this.