‫Let's now learn about yet another
‫fundamental React concept which is controlled elements.
‫So let's take a look what they are
‫and how we use controlled elements
‫when working with forms in React.
‫So to start, what we need to understand is that by default
‫these input fields like this input and also this select
‫they maintain their own state inside the DOM.
‫So basically inside the HTML element itself.
‫Now this makes it hard to read their values
‫and it also leaves this state right here in the DOM
‫which for many reasons is not ideal.
‫So in React, we usually like to keep all this state
‫in just one central place.
‫So inside the React application and not inside the DOM.
‫And so in order to do that we use a technique
‫called controlled elements.
‫And so with this technique
‫it is React who controls and owns the state
‫of these input fields and no longer the DOM.
‫So since we want to now keep this data
‫inside the application, what that means
‫is that we need some state, right?
‫Because that form data of course changes over time
‫and we also want to maintain our application
‫in sync with it.
‫So in order to implement the controlled elements technique,
‫we follow three steps.
‫First we create a piece of state.
‫So let's start with that
‫and we will start here with this actual input element.
‫So with this text field right there.
‫So that field is for the item description.
‫And so we call it description.
‫And then as always, the setter function is set description.
‫And so then we use the use state hook.
‫So the use state function.
‫And then just like before, when VS code shows us
‫this auto completion here
‫make sure to click here or to hit enter
‫because that will then automatically include
‫so it will import this use state hook into this file.
‫So it will automatically include this line of code
‫and then for some reason that didn't work in your VS code
‫then make sure to just write this out by hand.
‫Now the default value
‫for this description can just be an empty string like this.
‫And so now we finished the first step of this technique.
‫So we have our piece of state
‫and now we use that state as a value of the input field.
‫So we come down here
‫to the input that we want React to control
‫and then we specify the value
‫which again is just a normal HTML field, alright?
‫So even in HTML you can use value
‫and then set it to something.
‫So we could also do just this.
‫Alright? But now we don't want that.
‫But instead we want our description.
‫Give it a save and there we go.
‫Let's just reload to get rid of this.
‫Yeah, here we get another warning
‫and it's already telling us the third step
‫that we need to take.
‫But for now, let's just see what happens if for example
‫here we write now test.
‫So you see now our input field has the value of our state.
‫Okay and now for the final step,
‫we of course now need to somehow connect this state
‫with the value that we are actually going to type there
‫right, because now the state will simply always stay empty
‫even if we type something here.
‫So React is now controlling this element
‫and always sets it to the description.
‫But the description right now always stays
‫at this empty string.
‫And so no matter what we do,
‫right now we cannot change this.
‫So what we need to do is to also on the same element
‫listen for the change event.
‫So that's using the on change prop.
‫And then here let's just define an inline function.
‫And this function receives the event that was fired off.
‫So in this case the change event.
‫And then here, let's just type the code
‫and I will explain what actually is happening here.
‫So set description, e.target.value.
‫All right and now if we type here,
‫first let's reload again,
‫now that we type here, it works.
‫And to make this even more visual
‫let's come back here to our dev tools.
‫And then here in the form,
‫we need even more space.
‫So you see that we have our state of test
‫and if we write here,
‫then notice how that state down there is updating
‫so we can write anything.
‫And then basically it will get synchronized
‫with this state that we have in our application.
‫And so now it is in fact React that owns the state
‫and that is controlling the state.
‫But now back here to this line of code.
‫So basically, whenever we type something in this field
‫the change event is fired off and we can react
‫to that event here with this on change event handler.
‫And so here we pass in the function
‫and the function as always receives the event.
‫And then on the event we read target
‫and e.target is basically this entire element.
‫And then this element.value is exactly
‫the text that we wrote.
‫And just to make this a bit more visual
‫'cause I know that this can a bit tricky to understand
‫so I want to make sure that you get it.
‫So let's log to the console, also this e.target maybe.
‫So as I delete now, this will fire off the change event.
‫And so then here we get e.target.
‫So as I hover it, you see that e.target
‫is the entire element indeed.
‫So watch what happens when I set
‫or when I log e.target.value.
‫So immediately that character that I just typed
‫was logged here to the console and not just the character,
‫but actually the entire value.
‫So now I write another one
‫and then now we get t then test and then test.
‫And so it is this value that each time
‫that we write something,
‫we set as the new state of the description, all right?
‫So just to drive this home,
‫each time that we type here, we set the state again.
‫So we set it to the string that is currently
‫in this input field, which will then re-render this view.
‫So this entire form here actually.
‫And so then that new state
‫of description will get placed there as the value.
‫So we always need both the value
‫and the change here on the input element.
‫Let's get rid of these curly braces here.
‫Yeah, just like this.
‫And just to see if we actually understood this
‫we now need to do the exact same thing
‫with the select element.
‫And if you want, you can actually pause the video
‫and try that as a challenge now.
‫So did you try that?
‫Well, if not, that's no problem at all
‫'cause we only did this once, so I understand
‫that it's still quite fresh and maybe confusing.
‫But anyway, we now also need to control this
‫select input element right here.
‫So that's going to be the quantity.
‫So let's call that state quantity.
‫And the setter function is set quantity.
‫And then again, use state and here the default value
‫we want it to be one, let's just say five for now
‫just so we see the effect in the UI.
‫Okay? So that's the first step.
‫Now the second step is to then define the value.
‫And so in this moment
‫React then starts controlling this element.
‫So value of quantity, well, what was that?
‫And you see, immediately we get this five.
‫Again with this, it's easier to see with our dev tools.
‫And yeah, so that's the five.
‫But of course if we change this now
‫then nothing will happen.
‫And so the reason for that is the same as before
‫because this value is now coming from our quantity state.
‫The DOM is no longer in charge of this value now,
‫the only thing that we now have to do
‫is to give this the ability to change itself.
‫So to basically update the state
‫each time that we change this value here.
‫So that's again using the on change handler.
‫And this function gets the current event.
‫And here we now do the exact same thing.
‫So we set quantity
‫based on e.target.value,
‫and by the way, this value is coming directly
‫from the option so right from here.
‫So that's why we need to set the value
‫here inside of each option.
‫Just to make sure, let's give it a save.
‫And there we go.
‫So you see it changed here and it also changed here.
‫Maybe you cannot really see this
‫as it's right at the bottom, but yeah, here is the 10.
‫Now what we can see immediately is that this is
‫a string while in the beginning when we first load the app,
‫let's try that, we get the five but without the quotes.
‫So now this is actually not a string, it's still a number.
‫And that's because we set the default here as a number.
‫But then as soon as we change this
‫for example to something, then here we get this string.
‫And so the reason for that is that here
‫e.target.value is always a string.
‫So before we place this value into the state
‫let's first convert it to a number.
‫And we can do that in a few different ways.
‫We can use the trick of using a plus
‫or we can be a bit more explicit,
‫for example using the number function.
‫So I prefer to doing it like this
‫which makes the code a bit more readable.
‫So give it a save and now
‫let's see, yeah, now we get a number
‫and of course still when we write here
‫that will also update the state down here.
‫And this was actually an excellent demo
‫to show you how useful really these dev tools are
‫because they allowed us to immediately spot
‫that we didn't have a number here by the string.
‫And so with this, we prevented a potential bug in our code.
‫Great, so hopefully you got that
‫so you understood exactly how that works.
‫So just to quickly recap,
‫the technique of controlled elements
‫basically consists of three steps.
‫So we define a piece of state, like this description here
‫then we use that piece of state
‫on the element that we want to control.
‫So we basically force the element to always take the value
‫of this state variable.
‫And then finally, of course
‫we need to update that state variable.
‫And we do so here with the on change handler
‫where we then set the description
‫to the current value of that input field.
‫And so with this, it is now this component.
‫So basically it's React who is in charge
‫of the state and really of the entire element.
‫And so that's the reason why this technique
‫is called controlled element.
‫Great. So that should be clear now.
‫And so let's now go ahead
‫and just quickly use these values here.
‫For example, we can create a new item object
‫so a description, quantity,
‫also we have the packed state in each of these items.
‫And by default of course the items should not be packed.
‫So let's set it to false here.
‫And then we also need an ID.
‫Now we could use some library here to generate that ID
‫but let's do it quick and dirty here, just with date.now.
‫So that should just work here in this case.
‫And then for now, we will just log it to the console.
‫Alright, let's go to our console, reload, all of this.
‫And actually let's also set it to one
‫which is the default that makes most sense.
‫So let's say that we need 10 shirts.
‫So hit enter and beautiful.
‫So we got our data here from the state
‫and it contains the description
‫it contains the quantity right here.
‫And then these other data that we just defined.
‫So some random ID and also this packed state set to false.
‫So with this we learned how we get now this data
‫out of the form.
‫Now just to finish, let's tweak
‫or handle submit function a little bit.
‫For example, when this happens, so when we submit the form
‫without any item, then still this works.
‫But the description is simply set to an empty string
‫which is already filed here.
‫However, we don't want this to happen.
‫So when there's no description here
‫then we shouldn't even be able to submit the form.
‫So that's simple enough.
‫We can just add like a guard clause here.
‫So we can say if there is no description,
‫then return immediately.
‫So basically then nothing's going to happen.
‫And again, this is some normal JavaScript,
‫nothing to do with React.
‫So you see nothing happens now, but if so
‫then we get our object.
‫And now finally, usually when we submit a form
‫then afterwards, once that submission is done
‫the form should go back to its initial state.
‫So let's also do that.
‫And for that we can simply use our setter functions, right?
‫And so that's the beauty
‫of React being in charge of the form
‫because now all we have to do is to update the state
‫and then this enables React to automatically keep this state
‫in sync with these form elements.
‫So basically that's the whole idea
‫of the controlled elements.
‫It's to allow React to keep our component state
‫in sync with the state of these dumb form elements.
‫But anyway, let's now do what I just said.
‫So setting the description back to its initial state
‫and set the quantity also back to its initial state.
‫So let's try that one more time.
‫And beautiful.
‫So that worked really, really nicely.
‫So this form is now a lot more real world.
‫It's back to its initial state.
‫And then down here we get the data.
‫But now what do we do with this data?
‫So at some point we will want to actually render
‫this new object here into the user interface.
‫So right here into this packing list, right?
‫So how do you think we will do that?
‫So how can we get this new state?
‫So basically this new object that we just created
‫into this list.
‫And just as a reminder, this list,
‫well, it's even easier to see in the componentry.
‫So we have the form, and here is the list.
‫So we want to get the data from this form
‫into this packing list right here.
‫So do you think that we could do that with props?
‫Well, not really, right?
‫Because these are sibling components.
‫The form is not a parent component of the packing list
‫and therefore we cannot pass props from form
‫into the packing list, right?
‫So because data can only flow down the tree
‫but not up or sideways.
‫So that was one of the important things
‫that we learned about props, remember that?
‫So therefore, if we cannot use props in a simple way
‫we need to find another solution.
‫And so this is where we really need to start
‫thinking more about state and state management.
‫But since this is so important as a React developer,
‫I created an entire separate section
‫about thinking in React and that section is up next.
‫So what we're gonna do now is to take a break
‫in this application and finish this section
‫with a brief summary and a challenge to consolidate
‫our knowledge about how to use state in React.
‫And then after that, we will come back
‫here to this application
‫and then we will really make it work.
‫So then we will be able to pass data
‫basically from the form into the list.
‫So that's going to be a lot of fun.
‫So make sure to finish this section
‫and then right afterwards,
‫let's keep going with this application.