‫The next step to making our form work
‫is to take the input elements that we already have
‫and make them controlled elements.
‫So elements that are entirely controlled
‫by React components.
‫And since we already know how that works,
‫as we have done it so many times already,
‫let's get right to it.
‫So the first one is for the bill itself.
‫So "setBill".
‫And we use state with an empty string
‫and we are using an empty string because these are
‫input text elements.
‫And so this is how it needs to work.
‫Next up, we have one for the expense paid by the user.
‫So let's call this one "paidByUser"
‫And then "setPaidByUser",
‫"useState", again, empty,
‫and then also one for the selector.
‫So "const", "whoIsPaying" and "setWhoIsPaying",
‫"useState" and here we start with the default of "user",
‫which is one of the values that we have here
‫in our two options, right?
‫Now it would be a bit more elegant to
‫use a true false value here.
‫For example, we could call it "isPaidByUser"
‫and then that could be either true or false,
‫but that's a little bit difficult to implement
‫with the values coming from here.
‫So we can't really pass true or false here.
‫That doesn't really work.
‫And so we just do it like this.
‫Okay? And now once again, we will wire everything up.
‫So I will do it here as fast as I can.
‫And you could even pause the video if you want it
‫and just do it yourself.
‫So "e.target.value".
‫Okay?
‫And now why not just copy and paste this here.
‫So value is now "paidByUser" and then "setPaidByUser".
‫And the same thing,
‫well not here, but here.
‫So here it's "whoIsPaying" and then "setWhoIsPaying".
‫All right, so let's write something here
‫and then we should see it here in our componentry.
‫That the state is exactly what we expected.
‫Or actually we should convert these two here to numbers.
‫So let's select this one and actually also the next one,
‫so we can do everything at the same time.
‫And if I then reload here,
‫then yeah.
‫Oh, well only this one has been converted and oh, okay.
‫I did a mistake here.
‫So, just to see that it's normal that this happens.
‫So I selected the wrong one there.
‫So let's try that one more time because
‫of course this is really important that we get numbers here
‫and not strings and yeah, that's correct.
‫And if I select this one, then it is different.
‫But now what about this one here?
‫So why is there no value here?
‫Well, here we actually don't need a state
‫because we cannot write anything here into this field.
‫Also, this expense of the difference can actually
‫easily be computed from the bill value minus
‫the expense of the user himself.
‫So that sounds like derived state, right?
‫And I'm placing it right here after "paidByUser"
‫just so they are in the same order as in the UI.
‫So "paidByFriend" is simply the bill value
‫minus what has been paid by user.
‫But actually we should be careful with this
‫because in the beginning the bill is just a string.
‫So this doesn't really work.
‫So, let's first ask if there is a bill,
‫well then the results of the operation should be this,
‫and if not, then let's also make it an empty string.
‫And now we just need to go down here and use it.
‫Well, right here.
‫So here we will only specify the value, but not the handler.
‫So "paidByFriend" and, nice, there is our 150.
‫And if we change this, let's say to 150,
‫then of course each time that the state is updated,
‫so each time that we write something new,
‫the state is updated and then the component re-renders.
‫So this function will get executed again
‫and then this derived state,
‫so this variable here will be reset as well.
‫So it will take these values here, again
‫calculate its thing,
‫and then store the value in this variable.
‫So then that gets displayed here.
‫But now there's just one problem
‫with this because let's say we write 1500,
‫so that's not really correct
‫because then here Clark's expense is negative.
‫So basically we need to ensure
‫that our expense is at most equal
‫to the bill value itself, but never greater than it.
‫So let's come down here and do that right here.
‫So, we could actually extract this into its own function,
‫but let's just do it all in line here.
‫So we have the number here.
‫So the paid value, basically,
‫let's copy this cause we will need it again, but for now
‫let's test if this value is greater than the bill.
‫So if it is,
‫then we basically don't want to change the state.
‫So we can just use then the current "paidByUser" again.
‫But otherwise then we actually want the new state to
‫become, well, what we have written there.
‫So that's "e.target.value", okay?
‫So again, we check in the new value that has been written
‫into the field and we compare it with the bill.
‫And if it's larger than the bill,
‫then we will just basically reset the value here
‫to "paidByUser", which is already to value
‫that was in there before.
‫But if not, so if it's a valid value,
‫then we just use it here.
‫So this will then become the new state.
‫And so now to just quickly reload here, let's say 200.
‫And so now as I type some other number here,
‫you cannot see it, but I'm typing it,
‫then this value here is not updated.
‫Great. So we converted our form here
‫into a basically controlled form where
‫all the elements are now controlled elements.
‫So what we need to do next is to add the logic
‫of actually splitting the bill
‫and then updating the balance between the two friends.
‫So updating the value that we can see right here.
‫Now that's a bit more work
‫and so let's actually leave that for the next video.
‫But before we go there, I actually want to
‫quickly show you what happens when we click
‫on one of these other friends.
‫So let's click here.
‫And you see that the state has not been reset, right?
‫So the state that we had here
‫before is exactly the same when we click on other friends.
‫Now with the knowledge we have at this point,
‫we are not yet ready to fix this
‫and also not really ready to understand it.
‫All I can say for now is
‫that this happens because this component is rendered
‫in exactly the same place in the componentry as before.
‫I mean, when I click here again,
‫then the same component is rendered again
‫in exactly the same position.
‫So the component doesn't disappear in the meantime
‫and so therefore it is not really re-rendered.
‫And so that means that the state then stays the same.
‫Of course, if I close this and select the same friend again,
‫then since the component has disappeared
‫and then appeared again, then the state is reset.
‫But again, if I do this and select another one,
‫then the component doesn't really completely re-render,
‫at least not the state in it.
‫So the state is not reset in this case.
‫But don't worry about that for now,
‫as we will fix this later, once we have a bit more knowledge
‫about some deep fundamental things that happen
‫inside React. Now, right.
‫So just wanted to show you this, but now let's move on
‫to the next video and actually finish up this project.