All language subtitles for 5. Using TextFields - State Controlled Values

We've got a good skeleton here going for our Contact Us page.

But now we can go ahead and actually start setting up the inputs so that we can give the user a place

to tell us their name email phone number and whatever message they have to tell us.

So we'll come down and underneath the grid item container that's wrapping the email icon and the actual

email text.

Let's go ahead and underneath that grid I don't container wrapping both of those items.

We'll create an adjacent grid item container and inside of here we'll have the first grid item containing

a text field component we'll give this a label of name and then an I.D. of name as well.

But notice I did the lower case and in this case let's close this off for now and let's go ahead and

copy this text field component and we'll paste that two more times but what's changed the label here

to email the I.D. to email and then change the name of phone and idea of phone we can save these and

we'll see the page refresh and we'll now have some text fields here up on the screen and I actually

realized I want each of these in their own grid item container.

This is gonna help with the alignment and also with making sure they're on their own line I believe.

So let's go ahead and we can cut out the e-mail.

Let's add another grid item and we can paste that in right there and then cut the phone and then add

a new grid item paste that in as well.

So now let's save that and the page will refresh and it doesn't look any different yet but that will

make the styling in alignment y easier.

Now we can come in and we can click on the text field and you can see the label travels up above your

cursor and allows you to type in whatever you want into the field.

But right now these are uncontrolled text fields you notice that we did not set a value prop onto any

of these text fields.

And so the value is not being stored or managed anywhere or in any way.

It is just being put into the input and that is all that's happening so to make this a controlled input

and to make sure that we have access to whatever value is stored inside of these inputs let's go ahead

and we'll come up to the top and next to our import for react.

Well let's add our karma and d structure out the use state import as well.

Now we can come down and underneath our classes and theme constant let's go ahead and we'll come down

and add a constant and we're going to be using the U.S. State hook here.

So we're going to create a name and a set name function and then we'll use the state with a default

of an empty stream.

And now we can go ahead and let's copy this paste that two more times change this to email and set email

leave it set with a default of empty string and it will change the last one to phone and set phone.

All right.

Now we can scroll back down to our text fields and on the name.

Let's give it a value of our name.

State that we just created and then we can come down to the email give it a value of email in the phone

a value of phone.

Now if we save this we'll see the page refresh and we can see our inputs.

But if we come and we click on it and we go to type something in.

Well I'm trying I'm trying to type in but nothing is happening.

And the reason for this is because we've set a fixed value here of our name state value and our name

state value is set to an empty string.

And so the value within this text field is set to the empty string no matter what I try to do obviously

we want to be able to change that value after it is set initially.

So what we can do is on our text field we're going to add in on a change prop this is a function that

will be called every time there is a change to the text within our text field and we will use this then

to change our name state value so we can open this up with our curly braces and create an arrow function.

So we'll create an arrow function here and this is going to take an event and this will contain the

text being currently entered into the input.

So after the arrow function declaration then we will come in we'll take that event but we'll call set

name and we'll call it with the event dot target dot value.

So this is going to specify where the text that was put into our input and it's going to call the set

name function with our state for the name.

And it's going to update the value that we have stored inside so we can go ahead and save that now and

we'll see the page refresh.

And if I come into the name text field now I can begin to type and you can see that it is indeed popping

up because now we are changing that state value with our on change function.

So let's go ahead and we'll copy that on change function and paste that onto the email but make sure

to change the function to set email and then we can leave even to dot target dot value and we'll do

the same thing for phone said we'll change it to set phone we can save this now and once this refreshes

all the inputs should be working once again now that we've got the basic skeleton for these text fields

let's go ahead and we'll continue and let's add the text field for our message.

This is going to be in its own separate container.

So we'll find the grid item container grid item container.

And so this grid item container wrapping all of the text fields.

Make sure you come down and adjacent to that container.

Let's add a new grid item just a grid item and this will wrap another text field component with a value

of message an I.D. of message and then was paste in the on change property that we still have copied

and change the set name to set message and we'll create those in just a second and then we can close

off that text field component now let's go up real quick and we will create our constant of message

and set message.

With the U.S. State defaulting to the empty string we can scroll back down and if we save this we'll

see the page refresh and we have a new text field here.

And you notice I did not use a label and that's because I actually don't want this same effect here.

See now they have the the label that travels up and above the field.

I actually don't want that look for our message and we'll actually just go in and add a placeholder.

But remember that this also needs to be a multi high line input.

Remember from the design file that this actually takes up more space to kind of show that it's for a

message.

So if we scroll back down and we had gone over this in the text field overview there if we can now come

and on the text field for our message let's go ahead and add the mall time line.

Prop we can save this.

And once a page refreshes if we begin to type into this field once it gets to the end of the line you

can see we now keep creating new lines.

This works pretty good.

But I actually want to make sure that even if we don't have any text in here at all it should still

be providing that extra space to show that it is for a message and we can do that if we set a fixed

Rose property on here.

And I'm going to set that to the number 10 and we can save this.

We'll see the page refresh and our input is now.

This whole space and you can kind of tell it's a little hard because the underline is only here on the

bottom but our cursor is all the way here on the top.

If I begin to type you see in that we have that huge big space before we'll get down to where the scroll

bar will appear right there.

And now it starts scrolling after the tenth line.

I'll go ahead and delete all that text though and this is looking good.

I know it's a little messed up here but we'll go and address all these styling for our inputs in the

next video but we'll finish up with the structure for this real quick and let's get these send message

button down here.

And so we'll take the grid item wrapping the text field and create a new grid item adjacent to that

and this will be wrapping a button with a variant of contained with the text send message inside.

And that text is going to be sitting on top of an image with a source of airplane and an alt of paper

airplane and we can close the image off and then come up to our imports and underneath the e-mail what's

import the airplane from assets and then slash send Dias CVG let's save this and we'll see the page

refresh and we now have a little send message button down there.

So that's good enough for now.

So let's go ahead and grab the content for our call to action now.

So let's actually go into the UI folder and open up our call to action dot J.S. and we'll scroll down

and here's the overall wrapping grid item container for the entire call to action.

And we're going to go ahead and just grab everything inside of there.

So this whole grid item inside as well as a grid item for the button.

So everything inside of the call to action grid but not the outer grid itself.

Let's go ahead and copy that flip over to our contact dot.

Yes and we'll scroll down to the empty grid with the large nine property with our background and let's

paste all of that in we then have a couple of things to fix and we'll first go back over to the call

to action.

And in our styles object let's go ahead and copy the estimate button style.

So let's copy that.

We'll come back over to our styles object and underneath the background style in our contact in our

contact at DOT J.S. file.

Let's go ahead and paste the estimate button style in and we'll flip it back to the call to action and

then copy the learn button style as well.

So we will copy that paste it underneath the estimate button.

And now inside of our export default function call for the contact let's call the function with props

as an input.

And let's scroll down see what else we need to take care of.

Looks like we need to create our matches small variable.

So underneath the theme actually and scroll up and we need to import are use media query from material

dash UI slash core slash use media query and let's come down and then create our constant of matches

small with our use media querying called with the theme dot breakpoints dot down for small I think we

still have one last issue and as the button arrow so let's go ahead and under you are import for use

media query let's import the button arrow from dot slash UI slash button arrow now let's go ahead and

give that to save and we'll see what happens and you can see that we've got the call to action text

along with our button on the screen we won't go through and totally fix all of this yet but we can get

this content down off the very top of the screen and move it down vertically into the center.

So if we scroll down and we find the grid item container with our large of nine you can see this is

a container and we're not setting the direction so it's set with a default direction of row and so with

a direction of row your main axis is horizontal which we could specify using the justify property but

we want to center this vertically which would be our cross axis in this case.

So we need to set in a line items of center and save that and then we can see that our content jumps

down into the center of the page.

So this is looking good.

This is definitely a great start for our contact page.

We've got the full skeleton working well let's go ahead and actually make this look more like the design

file by styling all of our inputs and getting that set up in the next video.