‫One of the most important things
‫that we do on the web
‫is to interact with web applications through forms.
‫So forms are fundamental in web applications.
‫And so let's now start learning
‫how to work with forms in React.
‫And first off, when we build forms in React,
‫we use the normal HTML form element.
‫So we have a form, and then here,
‫let's add the select, the input, and the button.
‫So just looking at the demo here in HTML,
‫this is a select element, this is an input element.
‫And this is just a regular button.
‫Now here, we need to change that as well.
‫And there is a setting in VS code that will make it so,
‫that as I update this one,
‫the closing tag also gets updated.
‫But I will find that out after this video,
‫and then I will let you know.
‫But anyway, let's now create that, select element.
‫And now here, we want to create a bunch of numbers.
‫So inside the select, we create one option with the value.
‫And here let's use again JavaScript mode.
‫So in order to pass an actual number one,
‫and not the string of one,
‫let's just duplicate this a few times,
‫because we will actually not use this.
‫So you don't need to write this code, if you don't want to.
‫So this is just to show you what we will do instead,
‫in a minute here.
‫Let's just create that input first, after type text.
‫And let's also include a placeholder here.
‫And again, this is just normal HTML,
‫what we're doing here right now.
‫Finally a button with add.
‫Now okay, beautiful.
‫So that looks just like here, or very similar.
‫So here we have the one, two, three.
‫So these three values.
‫But here in the real app, we have 20.
‫So of course,
‫we don't want to write these 20 options over there by hand,
‫right?
‫So instead what we do is to, inside of JavaScript,
‫we will create an array with the numbers from one to 20,
‫and then we will loop over that array,
‫and basically create a list of option elements.
‫So let's do that, and we will use a nice trick,
‫which is called array.from.
‫And it's not really important how this function works.
‫So let's just follow this here.
‫And actually, we will do this all the time in React.
‫So this trick is actually quite important.
‫So as a first parameter here,
‫we can pass in an object with a length property,
‫and set that to 20.
‫So that will then create an empty array with 20 elements.
‫And then as a second part,
‫we can pass in basically something like a map function.
‫So that will receive as a first argument,
‫the current value, and as a second argument, the index.
‫And so here, we are only interested in that index,
‫because we will now return that index,
‫which starts at zero plus one.
‫And so then we get an array, which goes from one to 20.
‫And if we want it,
‫we could just grab this piece of code right here,
‫and run it inside of our console, make it a bit bigger.
‫And yeah, indeed we are missing the key somewhere there,
‫but nevermind, we will fix that in a minute.
‫And so indeed here, we get that array from one to 20.
‫All right.
‫And now all we need to do, is to again use the map method,
‫and loop over this
‫to create our list of these option elements.
‫So again, specifying the value,
‫and now that value is simply numb and we need the key.
‫And that key is also numb.
‫So remember how that when we render a list,
‫we need to give each of the elements a unique key.
‫So the number here is of course, unique.
‫And then here also numb.
‫So give that a safe,
‫which makes this a little bit more legible.
‫And so this option
‫is basically just exactly what we had before here manually.
‫But now we create that dynamically here,
‫automatically from zero to 20.
‫So there it is.
‫So since we were speaking of this key here,
‫let's also go to this list and fix the key there.
‫So right here where we have that map,
‫we need to also pass in the key.
‫So that key again needs to be something unique.
‫And what is unique here is this ID property,
‫not yet material, that's user three.
‫And so now these IDs are unique.
‫And so those are the ones, we are going to use.
‫So usually when we get an array of objects,
‫each of these objects should have an id.
‫So that's then the perfect candidate
‫for using here as a key.
‫And again,
‫we will learn later exactly what this key is,
‫and why it's so important.
‫But without it, React will always complain.
‫Alright, after reloading it, it is gone.
‫And so let's go back to our form,
‫and the form is actually already complete at this point.
‫And so let's now talk about events.
‫So basically, what we want to happen
‫is when we click on this button here,
‫we want this form to be submitted.
‫And so we can then React to this form submission
‫with an event handler.
‫So let's do what I just said.
‫First, let's actually create the event handler.
‫And we will do that just like before,
‫right in the component function.
‫So here we create another function,
‫and this one is typically called handleSubmit.
‫All right?
‫And now all we need to do
‫is to listen for that submit event.
‫So how do you think we do that?
‫Well, we go right here to this form,
‫and then we add onSubmit.
‫And then all we need to do
‫is to pass in the handleSubmit function
‫that we just created.
‫And again, really, really important to understand
‫is that we don't call the function here.
‫So we don't do this.
‫Instead React, we'll call the function for us
‫as soon as the onSubmit event happens.
‫Now, when exactly is that submit event going to happen?
‫Well simply as soon as we click here on this button.
‫But for now, of course nothing is happening,
‫because we don't have any logic in our handler function yet.
‫Now another way in which a form can be submitted
‫is by hitting the enter key,
‫while we are here in the submit.
‫So when I'm here and I hit enter,
‫then you see that the form got submitted actually.
‫So maybe you saw that there was a brief flash of reloading,
‫and that's just a normal behavior of forms in HTML.
‫So that has nothing to do with React.
‫Now let's just do this one more time, so I can show you.
‫So writing test, and then submitting, watch what happens.
‫So as I told you before,
‫there was like a brief flash,
‫and then the page actually reloaded.
‫And so the text that we got here is gone.
‫Now remember
‫that whole conversation about the single page application.
‫Where I mentioned that in a single page application,
‫like we want to build with React,
‫we usually can submit a form without the page reloading.
‫So in other words, what we want
‫is for this page not to reload.
‫And so we need to disable this default behavior of HTML.
‫So the way we do that is to accept the event here.
‫And then here, we can use event.preventDefault.
‫And again, this is normal JavaScript right here.
‫So if you're used to working with forms
‫in Vanilla JavaScript,
‫then you probably have seen this before.
‫So let's see what happens now when we submit,
‫yeah then nothing happens.
‫So that's actually exactly what we want now.
‫We want no reload.
‫So we want to stay here on the same page.
‫So building a single page application.
‫Now what's with this E here actually, how does it get here?
‫Well as soon as the submit event happens,
‫React will call this handleSubmit function.
‫And when it does so,
‫it will pass into the function, the event object.
‫So an object with all the information
‫about the current event.
‫So again, that's very similar
‫to what happens already in Vanilla JavaScript.
‫So here we could also basically write this.
‫So this would be exactly the same,
‫but it's then a bit more obvious what happens.
‫So here this function gets the event,
‫and then we call handleSubmit with that event.
‫But that's kind of redundant.
‫So let's remove that.
‫So let's just quickly recap what we did here,
‫which was actually not a lot,
‫but it's still important to understand what happened here.
‫So first of all, we just created a, or form elements,
‫and then the important part
‫is that we are listening now for the submit event,
‫that happens on the form.
‫And that event happens on the form
‫as soon as we click this button,
‫or as soon as we hit enter
‫while we are in this input element.
‫And again, that is just some normal behavior of HTML.
‫Now we could also not listen to the submit event,
‫and instead listen for on click right here.
‫So we could do like this, net end for example,
‫create a function, handleClick.
‫So instead of handleSubmit.
‫So that would also work,
‫but it would only work on the click of the button.
‫So that would then not work, when we hit enter while here.
‫But we do actually want that.
‫And so let's instead, listen for the submit event.
‫And by doing so, we are leveraging the power of HTML forms.
‫Now the next question
‫is how do we actually get this data from the form
‫into this event handler, right?
‫Because of course the goal
‫is to do something with this data.
‫So with this quantity and with this item description.
‫Well there are multiple ways of doing so.
‫So we could get that data right from the event object.
‫So let's just see,
‫we could like log this event to the console.
‫So let's see what happens.
‫So here we get this synthetic base event,
‫and we will talk about
‫what this synthetic event is a bit later.
‫But you see that here we get the target.
‫So basically the element on which the event was fired.
‫And then there we have, for example,
‫the input on which we can see the value.
‫So test is exactly what we have here, right?
‫However in React, we usually don't do this.
‫Instead, we use something called controlled elements.
‫But that's a topic for a whole new video.
‫And so let's now take a break and come back in a second.