Create a form with React hooks

Instructor: [0:01] To create a form that we can submit to the serverless function, we're going to edit this main page in the Vite project. Let's start by opening up the src folder and then editing App.css. We're not going to keep any of this, so let's just put in some CSS here.

[0:16] I'm not going to go over how the CSS works because it's not part of what we're learning today, but you can see it in the code sample attached to this lesson. Next, open up App.tsx. We're going to replace that with an entirely new bit of code here. We can delete everything in here and start afresh.

[0:34] We haven't created this yet, but we're going to create a component called Form. We're going to start by importing that, so import Form from componentsForm. That's where it's going to live. Then we're also going to import that App.css that we just edited.

[0:51] Finally, we're going to create a function called App() that has no arguments, and it's going to return some JSX. We're going to start with a fragment here. That's so that we don't get any junkie markup.

[1:05] Then we're going to put in a header. Inside the header, we're going to give it an H1. We'll say, serverless Typescript+React. Then underneath our header, we're going to create a main. In our main, we'll use that form component that we still need to create.

[1:22] Down below this, we are going to export default app, so that our site can load. This is going to break if we save right now because we haven't created that form yet. Let's go ahead and get that created before we save. I'm going to go ahead and create a new file.

[1:37] This is going to live in a folder called Components. Let's do some styles first. We'll do form.module.CSS. Inside of this, I'm going to again, not talk about how the CSS works. I'm just going to drop it in so that we have it ready to go. You can see it in the code sample for this lesson.

[1:54] Then we're going to create a new file called form.tsx. That is so that we know that it is a Typescript file that's using JSX. The first thing that we want to do is we are going to be storing a little bit of state for our form. We're going to import useState from React.

[2:12] Then we want to use those styles we just created. Let's import styles from our form.module.CSS. Then, we're going to export a function called Form(). This is going to be our component. It doesn't take any props so we can just jump right inside and we'll say, const name.

[2:32] That's going to be the first piece of data we'll store. We need a way to set that piece of data. Then it's going to be useState with an empty string. By default, there's no value set. Then we're going to go in here and add another one for our favorite color. That's what this form is going to ask for, your name and your favorite color. We'll set name, set favorite color. Again, that's useState and we'll default to an empty string.

[2:57] Then we're going to return some JSX, which will be the actual markup for the form. Let's start by putting it in a fragment. In here, we'll set up a form and we want to use those styles that we set up. This is a CSS module syntax.

[3:12] If you're not familiar with that, you can check for a link on how CSS modules work. We're not going to go into depth here. Inside our form, we're going to set up a label that's going to need an HTML 4, and we'll give it an HTML 4 for name.

[3:27] Then we'll give it a class name of styles.label. Inside of it, we'll say name. Then underneath, we're going to set up an input and that's going to have a name of name. It also needs an ID of name to match up with that HTML 4 up above.

[3:45] We'll give it a class name of styles.input, a type of text, and on change. This is so that when someone types into the form, we actually do something with it. That's going to have a callback function. We'll use E as shorthand for event because this is a one liner.

[4:05] We're going to set name to E.target.value. Whenever somebody edits that field, we'll just update the state. Then the value will initially be set to name. Now we've created what's called a controlled component in React.

[4:21] Next, we want to just duplicate this whole thing and we're going to trade it out to be favorite color this time. Let's just edit all of these to be favorite color. We'll come in here and edit this one to be favorite color.

[4:41] Then we just need to edit out this one to be set favorite color, and this will also be favorite color. Now that we've created that, we can set up our button to actually submit the form. That's going to be a button. It'll have a class name of styles.button, and we'll say submit.

[5:05] That should be our form. We can go ahead and save this. We can go back to our app.tsx, and save that. If we come out here, we can see that we've created a form. This form doesn't actually do anything.

[5:18] If I go in here and submit it, it just does the default thing, which is to submit as a query string to itself, and that's OK. That is not a bad way for this to go. It means that we've created a functional form, and it is in fact submitting the form when we hit this button. We just need to make sure that next, we actually submit it somewhere for processing.