‫Welcome back to the Far Away application
‫that we started building in the previous section.
‫And now, let's add some important state to the app
‫and then also, lift that state up.
‫But before we start doing that,
‫let's recap where we left off
‫at the end of the previous section.
‫So, remember how we made our form here
‫with these two controlled elements?
‫So, the state of these two elements
‫is controlled here inside the form component
‫with the description and the quantity state.
‫Then, whenever this form here is submitted,
‫the submit event will fire off.
‫And so then, we are handling that submit event here
‫using the onSubmit prop with the handleSubmit function.
‫So, this function right here.
‫Then, if there is a description,
‫we create this new item object
‫which, right now, we are only logging to the console.
‫So, let's try that.
‫And so you see, we got an object
‫with a description, the quantity,
‫the packed status set to false by default
‫and some random ID right here.
‫Now, okay?
‫But again, right now,
‫we are only logging this piece of information.
‫So, this new object here to the console.
‫But now, let's do actually something else.
‫So we want to store this information somewhere
‫and to help us with that,
‫we can actually use the flow chart
‫that we just looked at in the previous lecture.
‫So, we already know
‫that we want to store some piece of information.
‫Now, will that data,
‫so that information change at some point in the future?
‫Well, yes.
‫It definitely will each time that we add a new item
‫to the items list.
‫Now, can that data be computed from existing state or props?
‫Well, no. It cannot.
‫So therefore, we cannot derive state.
‫Then the next question in our flow chart
‫is whether this new data
‫should actually re-render the component
‫whenever it is updated.
‫And the answer to that question is a resounding yes.
‫And so therefore, as we already expected,
‫the result of this first part of the flow chart
‫is that we need to create a new piece of state
‫in the component that we are currently building.
‫And so with this,
‫we finished the first half here of the flow chart
‫which is about when to create a new piece of state.
‫Now back here in our code, let's actually do that.
‫So, let's create a new state variable called items.
‫And then, as always, we have our setter function,
‫in this case, called setItems.
‫And so then, useState.
‫And now what do you think will be the default value
‫for this state variable?
‫Well, remember that these items here
‫are basically the packing items
‫that are displayed here in the UI.
‫And so this, remember, is an array
‫and therefore, our initial state for the items
‫is just an empty array.
‫So, when we open up a new packing list...
‫So, when we open up this app for the first time,
‫of course, we don't want to have any items.
‫And so, that's what the empty array here basically is.
‫Okay?
‫And so now, let's actually use
‫the setItems function here
‫to add our new items to the items array.
‫And actually, let's do that in a separate function
‫and let's call that handleAddItems
‫and this function will receive a new item object
‫which it will then add to the items array.
‫So, let's actually immediately call the function here.
‫So here, we will call handleAddItems
‫and then, with the new item that we just create.
‫So, for example, with an item,
‫that looks just like this.
‫So, that's what we pass in here.
‫And now again, it's time to use setItems
‫to update or items array.
‫And this new items array
‫will basically be the current items array,
‫plus, the new item added to the end.
‫And so what this means
‫is that the new state depends on the current state,
‫and therefore, here we now need to pass in
‫a callback function.
‫So, not just a single value.
‫So, let's call the current state here
‫in this call back items.
‫Now then, here, let's see what we need to do.
‫So, remember that in React,
‫we are not allowed to mutate state.
‫So, we cannot do this.
‫So, we can not simply push the new item
‫into the items array
‫because with that, we would be mutating.
‫So, we would be changing this item's array right here.
‫And again, that's really not allowed in React.
‫So, React is all about immutability.
‫And so, the solution here
‫is to create a brand new array
‫which contains all the current items, plus, the new one.
‫So, let's return a new array
‫and then, in there, we simply spread the current items
‫and then we add another item
‫which is simply called item.
‫So, the item that we are receiving here.
‫Now, if this looks strange to you
‫then please go back
‫to the review of essential JavaScript section
‫where I have a couple of videos
‫on how to work with array in a immutable way.
‫So basically, how to add new items,
‫how to update
‫and how to delete items from an array
‫without mutating the original.
‫So, in React,
‫that's something that we need to do all the time.
‫And so, again, if you're not sure how that works
‫then please go back to that section
‫because from now on,
‫I will simply assume that you know how to do this.
‫Now, okay?
‫So, this is already done.
‫So, we now have a way of adding new items to the state.
‫So, let's immediately test that here.
‫So, let's use now 10 test items.
‫And so we are still logging them to the console
‫but now, I want to draw your attention
‫here again to the dev tools,
‫and in particular, of course, to the form component
‫that we are working with now.
‫And so down here, we already have our state
‫which already has this new item that we just created.
‫Nice.
‫So, let's do another one for, like, boarding passes.
‫And you see, immediately, it got also added
‫to our items array.
‫So, our updating logic here is working just fine.
‫But of course, this state is now nowhere being displayed
‫in the UI yet.
‫Right?
‫So, we are not using this items variable
‫anywhere in our JSX yet.
‫And the reason for that
‫is that actually, we do not need these items
‫in this current component.
‫The only goal of the form component
‫is to add new items to this array,
‫but not to render it.
‫Instead, remember that who renders these items
‫is actually the packing list component.
‫So, that's this one here, right?
‫But with this, we now created ourselves a problem.
‫So, let's take a closer look here at the component tree.
‫So, right now, our item state
‫is here inside the form component, right?
‫And so, this is where we update the state.
‫However, we need the state itself.
‫So, we need this item state variable
‫here in the packing list
‫because again, this is where it should actually be rendered
‫onto the UI.
‫And so now, how do we get this state from the form
‫to the packing list?
‫Well, we cannot pass it as a prop
‫because the form is not a parent component of packing list,
‫it is simply a sibling component.
‫But data can only flow down the tree.
‫It cannot flow up the tree or sideways.
‫So therefore, we cannot simply pass these items
‫to the packing list via props.
‫Instead, we now need to use a technique
‫that I mentioned before,
‫which is to lift up state.
‫So, what we're going to do now
‫is to take this state here,
‫so this line of code,
‫and we will move it to the closest common parent component.
‫So, which one is that?
‫Well, it's simply the app component, right?
‫So, this component is both, a parent of the form
‫and of the packing list
‫which are the two components which need this state.
‫So, again, let's grab this
‫and let's move to our app
‫and at the state right there.
‫And then, of course, we get these errors here
‫because setItems is no longer defined in the form.
‫So, let's fix that in a minute.
‫But I want to start by now passing the items
‫here into the packing list.
‫So, we define a new prop called items
‫into which we pass the items array.
‫All right?
‫Then let's come to the packing list
‫and accept that prop there.
‫So remember,
‫we can immediately destructure the props object here.
‫And then, instead of the initial items,
‫we will now finally render the actual items.
‫And with this,
‫we have now used the items state in our JSX.
‫Right?
‫And now let's take care here
‫of this handleAddItems function.
‫So actually, I will grab this entire function
‫and move it here.
‫And so now, all we have to do
‫in order to enable the form to update the state
‫is to pass in this handleAddItems function.
‫So, let's do that.
‫Let's create a new prop
‫and kind of a convention is to call this now onAddItems,
‫handleAddItems.
‫So, we could of course call it
‫the exact same prop name here.
‫So, we could create a prop called handleAddItems
‫and then pass it to function with the same name,
‫but it's kind of a convention for it to be like this.
‫So, it then becomes a bit more readable,
‫like onAddItems, call handleAddItems,
‫if that makes sense.
‫And then here, let's accept that.
‫onAddItems.
‫And finally, here we now need to call, of course,
‫the function with this prop.
‫So, with this prop name.
‫onAddItems.
‫And with this, we fixed all the errors that we had
‫but probably what we just did here is quite a bit confusing.
‫So, let me first now add a new item here
‫just to see if it works
‫and then I will explain what's actually happening
‫a bit better.
‫So, let's see.
‫And there it is.
‫So, we created a new item here.
‫It was then added into the item state
‫which now lives in the app.
‫Let's check that.
‫Yep, that's right.
‫Here it is.
‫And so then, that state got passed down here
‫into the packing list
‫which received it as a props
‫and we can see that right here also in the dev tools.
‫So, here we now have the items as a prop
‫and then, of course, that gets rendered to the UI.
‫Let's try another one.
‫And immediately, it got added here to the,
‫well, to this state right here
‫which was then passed down into the packing list.
‫And now about updating the state,
‫this is what happened.
‫So, we now have our handleAddItems function
‫right here in the app,
‫which is exactly where the piece of state also lives.
‫So, where we have the home of the items state.
‫And so all the logic about updating that state
‫is here in the same component.
‫However, it is the form that is actually responsible
‫for creating new items.
‫And so, therefore, we need to give this component,
‫so this form component here,
‫access to a function that can update the state.
‫And so, that function is handleAddItems.
‫So, as I mentioned before,
‫we can actually pass anything as a prop.
‫And so, that includes functions.
‫So, here we pass in handleAddItems as a prop
‫and we call that prop onAddItems,
‫which of course, again,
‫could also be called handleAddItems
‫which some people prefer,
‫but many times, you will see this convention.
‫So then, we come here, destructure the props
‫and then we call that function
‫whenever the form is submitted.
‫And that's it.
‫So, this is how we lift up state.
‫So, basically what that means
‫is that whenever multiple sibling components
‫need access to the same state,
‫we move that piece of state up
‫to the first common parent component,
‫which again, in our case here, was the up component.
‫All right?
‫And we will actually review this one more time
‫in the next lecture.
‫But for now, let's move back to our flow chart
‫and quickly complete it.
‫So basically, we will just review what we just did
‫and then see how we would have arrived at that solution
‫here with the flow chart.
‫So, the new state that we created,
‫was it only used in the initial component?
‫So, only used in a form?
‫No, it was not.
‫So, then we move here
‫and we ask ourselves,
‫is the state also needed by a child component?
‫And again, the answer is no.
‫Because instead, it was needed by a sibling component.
‫And so therefore,
‫that is how we lifted state up
‫to the first common parent.
‫All right?
‫So, make sure to take another look
‫at the code that we just wrote
‫and then, in the next video,
‫we will take an even closer look
‫at this concept of lifting up state.