‫Let's wrap up this section
‫by continuing to work on the date counter challenge
‫that we started earlier.
‫So in this part two of the challenge,
‫we will upgrade the date counter that we built before.
‫So, we can still click here on these buttons
‫to move forward in the date,
‫but now we can also directly go to a date
‫by defining a count here.
‫So for example, 1000 days from now is,
‫well, this one here,
‫or 10,000 or 100,000,
‫and you can keep going as you wish.
‫So let's put it back to 1.
‫So that is the upgrade here for the counter,
‫and the step is also different.
‫So instead of these buttons that we had before
‫so similar to these ones,
‫we now have this slider.
‫And so now if we click here,
‫we move up this seven here,
‫but the seven was now defined using this nice slider.
‫And this slider is actually just another type of
‫HTML input element,
‫but I will show you that here in a minute.
‫Finally, what we also have is that we can reset.
‫So when we click Reset,
‫it goes back to 0 here and back to 1 in the step.
‫And this button is only visible
‫when one of these two changes.
‫So let's go back and let's do that.
‫So here I still have to code from the previous challenge,
‫and what I'm going to do now is to fork this.
‫So this will basically create a copy out of that other one,
‫and so now I can keep writing the code here
‫without changing the initial one.
‫So what I wanted to quickly show you here is that slider.
‫So, we can use the input.
‫So as I said, this is now an input
‫and the type is of range.
‫And then we set a minimum value,
‫you can set that to 0,
‫and a max value to 10.
‫Let's see.
‫And there we go.
‫So now this is of course an uncontrolled element now.
‫So right now, React is not in charge
‫of controlling this value.
‫And so what you need to do, as you can imagine,
‫is now make this input element a controlled element
‫and then also this one right here.
‫So with this, you'll practice what we just learned
‫a little bit earlier, right?
‫And in case you have any doubt,
‫you can just go back to that lecture
‫and check out the code that you wrote there.
‫So, let me just show you here the result
‫so you know what you have to build.
‫So good luck with this challenge,
‫and I see you back here in a few minutes once you are ready.
‫All right, let's now quickly supercharge
‫basically our counter component.
‫So most of the things are actually not going to change here.
‫So we already have the step state.
‫All we have to do is to connect it now
‫so with this input element.
‫So the value of this element should be of course
‫controlled by that step state.
‫And then, we need the onChange handler
‫just like before.
‫So we get the current event
‫and then we set the step based on that event,
‫so event.target.value.
‫And then we can get rid here off this button.
‫And let's see.
‫Yeah, that works already.
‫And indeed, well,
‫that doesn't really work, does it?
‫So it is adding the 10 as a string.
‫So we have a bug in our code.
‫So the problem as you can see
‫is that this value here is taken as a string.
‫So that's actually the problem that we had before
‫and that we detected using the React DevTools.
‫And in fact, the DevTools are also available here
‫so we could see the same thing here.
‫So the state is 10,
‫so 10 is a string.
‫So we just do what we did before,
‫which is to convert this value to a number
‫before we then place it into the state.
‫So let's reload that here.
‫Take some time,
‫and let's set it to something.
‫And that's working now.
‫And you see here that we have,
‫well, that's not correct really for some reason,
‫but what matters is that here it's actually working.
‫So, maybe the integration here in CodeSandbox
‫is not as good.
‫But yeah, nevermind,
‫what matters is that this part is working already.
‫And now all we have to do is to create
‫an input element here as well.
‫So that should also not be so hard.
‫So we no longer need this span,
‫but instead we will use an input
‫of the type text,
‫the value here is count,
‫and then onChange.
‫Basically we want almost the same thing as before.
‫So we get the current event
‫and then setCount,
‫and then this time we're not going to forget
‫the conversion part.
‫So we convert
‫to a number e.target.value.
‫And now all we need to do
‫is to close down this element,
‫give it a safe.
‫And yeah, this all looks correct to me.
‫Let's see.
‫Something's happening here,
‫let's close down the React Tools maybe.
‫Yeah, anyway, let's just reload here just to be sure.
‫So this works.
‫And now if we input a value here, yeah, nice.
‫So that's really, really nice.
‫So with this, we have a bit more control over the component
‫and we can calculate dates from now, which is quite helpful.
‫But yeah, let's just review quickly what we did here.
‫So these two input elements
‫are now controlled elements
‫for the same reason that we already saw before.
‫So we have a piece of state
‫and we then connect that piece of state,
‫for example here, the step, with the input element.
‫So we force this input field to take the value
‫of the step piece of state.
‫But that alone is of course not enough
‫because with that, we would not be able to then change
‫here the value.
‫And so we then need to handle the event
‫of actually trying to change,
‫so of sliding here basically,
‫so each time we slide the change event is fired off.
‫And so then each time that happens,
‫we want to set a step
‫with the current value of the element.
‫So that's e.target.value.
‫Nice. And finally, the only thing that's missing
‫is that reset, so that button right here.
‫So let's then create a button down here.
‫Let's create another div where we place that button into.
‫So Reset, close that,
‫and close the div.
‫So we want something to happen on the click,
‫so we use the onClick prop.
‫And now here, let's actually do this as a separate function
‫because here we will need to set two pieces of state.
‫So let's call this handleReset.
‫Now that does of course not exist
‫so we get this complaint,
‫so let's fix that handleReset.
‫And so what's going to happen here?
‫Well, all we have to do is to set these two
‫back to their initial state using their setter functions.
‫So, setCount will go back to 0,
‫and the step will go back to 1.
‫So, yeah, that works.
‫The only thing that's different between
‫the demo that I showed you
‫is that we should not display this Reset button
‫when there's actually nothing to reset.
‫So basically, what we want to do
‫is to conditionally render this part here.
‫So let's wrap it into a JavaScript block.
‫And then we can say,
‫if count is equal to zero,
‫or if step
‫is different than one.
‫So count different from 0,
‫or step different from 1.
‫So 0 is the default for count
‫and 1 is the default for step.
‫And so if one of these defaults is different,
‫then we want to conditionally render this part.
‫So for that, we can again use the end operator,
‫or maybe just, why not,
‫lets this time use the ternary operator.
‫So in this case,
‫maybe we should just put a parenthesis around this.
‫So just to make sure that this is one condition
‫that gets evaluated first.
‫So in this case, render this,
‫and else, render nothing.
‫All right.
‫So as soon as we change this, we get a button,
‫or as soon as we change this, the same.
‫Beautiful. So that's exactly what we wanted to build.
‫And so we are finished with the challenge
‫and we are finished with the section.
‫And so let's waste no time
‫and let's keep working on the far away list
‫right in the next lecture of the next section.