‫So, as I was just saying
‫let's now go back to our Eat-'N-Split app
‫to fix one problem that we have left in that application.
‫So, let's come to our desktop
‫and then grab the project folder and open it in VS Code.
‫Okay, and so now we have two VS Code windows open,
‫and we will also start two React apps at the same time.
‫So, let's just write npm start,
‫hit enter, and then it will ask you
‫to use another port instead.
‫And so, that's simply because you're already running
‫one app here in this other port, and of course,
‫each one can only have one app running.
‫So, just hit enter or Y
‫as you reached this step, and then you will see
‫your application pop up right here.
‫Let's get a bit more space,
‫and then, let me show you the problem
‫that we actually left here.
‫So, let's say that we typed some values in here,
‫and then, we moved to another friend.
‫So, here we have exactly the same problem as before.
‫So, as we select another friend,
‫the only thing that changes is really the props
‫that is being passed here into this component.
‫So, let's check out the name of that component
‫as I don't remember it.
‫So,
‫yeah, it's this FormSplitBill.
‫So this one receives the selectedfriend object,
‫but as you see here, as we change,
‫nothing changes in the dumbtree.
‫And so, across these re-renders,
‫exactly the same component is rendered in exactly
‫the same position of the tree.
‫So, just like before.
‫And so, therefore, the state is not reset across renders,
‫but also just like before,
‫this is not the behavior that we would expect
‫in this application, right?
‫So, if suddenly we move from one friend to the other one,
‫we would certainly expect that the bill value here
‫should be reset.
‫So how can we do that?
‫Well, let's see where we are using this form SplitBill.
‫So, that should be somewhere here in the app probably.
‫So,
‫yeah, here it is.
‫And so, now we basically need to make
‫each component instance here unique
‫so that each time that it is rendered
‫with a new friend, React will see this
‫as a completely new component instance.
‫And as you already know, the way we do that
‫is by providing a key
‫that will actually change across the re-renders.
‫So here we can use the selectedfriend.id,
‫I guess.
‫So let's just see if they actually have an ID,
‫and, yeah, they have.
‫So, we could also use the name here, really.
‫So, those are also different, but the ID is really
‫a unique identifier.
‫So let's see.
‫So we are at Sarah, and so, therefore,
‫let's see down here.
‫So, here we see that the key now is 933 whatever.
‫And so, let's move to another friend.
‫And there we go.
‫So we fixed our problem
‫because now, the component instance has another key,
‫and so, therefore it is a completely unique instance
‫right now.
‫Great, and that's actually it.
‫So that's all we have to do here.
‫So let's close this one.
‫And let's also close this.
‫So we are finished.
‫We are back in our project that we were working on before.
‫And so, yeah, there's nothing left to do.
‫And so, let's move on right to the next lecture.