‫So now that we know what state is
‫let's try to implement it in our small project.
‫And just as a quick reminder,
‫what we want to happen
‫is that when we click this next and this previous button
‫we basically want the step to change.
‫So the step here is currently set to one,
‫but we want this step variable basically to be dynamic.
‫And so for that,
‫we now need to add a new piece of state to our component.
‫So let's get rid of this
‫and add that new piece of state.
‫So in order to use state in practice in a component,
‫we do it in three steps.
‫First, we add a new state variable,
‫then we use it in a code and usually in JSX.
‫And third, we then update the piece of state
‫in some event handler.
‫And so let's start with the first step
‫which is to actually create the state variable.
‫And we do so using the use state function
‫that React provides to us.
‫So that's use state,
‫and if now I hit enter on my keyboard
‫as this use state here is selected
‫in the VS code auto complete,
‫VS code will automatically import
‫the use state function from React.
‫So this line of code right here.
‫Now if for some reason that didn't happen
‫in your code editor,
‫then make sure that you import the use state function
‫from React in that way.
‫So the use state function is a function,
‫and so it takes an argument,
‫and the argument that we need to specify here
‫is the default value of this state variable.
‫So that's in our case step number one, right.
‫Now this use state function here
‫will return an array.
‫And so actually let's just call it array for now
‫and then log it to the console.
‫So just so you see.
‫And so yeah, now step is no longer defined.
‫Let's just put that back for a minute.
‫Step equals one, and then open up our console here.
‫So this is the array.
‫And so you see it has two values here.
‫So this first value, so this number one,
‫is the default value that we want for our state.
‫So this one here.
‫And then the second one is a function
‫that we can use to update our state variable.
‫So what we usually do
‫is to then immediately destructure this array right here.
‫So first we have step, which again is this first right here.
‫And so this will be our state variable itself.
‫And then second, again, we have the function.
‫And so this one we usually call set
‫and then the name of the state variable.
‫So set step in this case.
‫Now we can get rid of this.
‫And if we now reload,
‫we see that our app is already using that piece of state,
‫so that step variable, because this is exactly
‫the variable name that we had before.
‫So we are already using the step in our JSX here,
‫and here, and also here for this class name.
‫Okay, so we have completed the first step
‫of defining the state variable
‫using the use state function,
‫and the second step in which we use the state variable,
‫so this step piece of state in our code.
‫And so now the third step is to actually update the state
‫in an event handler.
‫So let's get rid of this alert
‫which was just a placeholder.
‫Or actually let's start with this one.
‫So at the next one.
‫So, now it's time to use this set step function here.
‫So we use set step to update the step state variable.
‫And so what do we want the step to be?
‫Well, basically just the current step plus one, right?
‫So when we click the next button, the step should go one up.
‫And so that's the current step plus one.
‫And so now we are ready to test this.
‫So let's see,
‫and yeah, that works.
‫So our component is now dynamic and so congratulations,
‫you just unlocked the power of state and the power of React.
‫So what happened here as we clicked on this button
‫was that the handle next event handle function was caught,
‫and this event handler then updated the step state.
‫And so then React automatically rendered
‫this new component view for us.
‫So that's just amazing.
‫Now let's go back here,
‫and implement also the handle previous function.
‫And here we basically want the opposite.
‫So set step, and then step minus one.
‫So let's see,
‫and yeah, that works.
‫However, right now we have a small bug in our app
‫because watch what happens when I keep clicking here.
‫So you see step zero and step minus one and so on.
‫And the same here.
‫So if I keep going, then of course we have no more elements
‫in our array to show.
‫So the array only has three elements.
‫And so step five or anything below step zero
‫doesn't make any sense.
‫And so here in the handler function,
‫we can simply add a condition in order to prevent that.
‫So let's just say if the step is greater than one
‫only then set this step,
‫and then, here something similar.
‫So if the step is less than three.
‫So let's see, let's reload this.
‫And so now if I click next, so right now the step is three,
‫so this one here is no longer true.
‫And so now then this part should not be executed,
‫and indeed, that works.
‫So we fixed that small bug
‫and now our component is working just as we want it.
‫Great.
‫Now just a few more things
‫about the creation of the state variable here.
‫So first of all, this use state function here
‫is what we call a hook in React.
‫And we can identify hooks
‫because they start with this use keyword here.
‫So all the React functions that start with use like this,
‫for example, use effect or use reducer,
‫and of course, this use state, are React hooks.
‫And we will learn in detail
‫what a React hook is a bit later.
‫But for now, what you need to know
‫is that we can only call hooks
‫like use state, on the top level of the function.
‫So of this component function right here.
‫So only here is it allowed to call use state
‫not inside an if statement,
‫or inside another function, or inside a loop.
‫So for example, we could not do this.
‫So immediately React would then tell us
‫that the use state hook was caught in a function
‫that is not a React function component.
‫So we can only do that right here.
‫So also not in an if statement.
‫So let's say if true for example,
‫then let's see, and again, you see immediately
‫that we get this error saying
‫that use state was caught conditionally,
‫and before it actually gets to this dramatic error here,
‫we can even see in this overlay in VS code
‫that React hook was caught conditionally.
‫And this one here is coming from ESLint by the way.
‫And that's why it was so important
‫to set up ESLint in the beginning.
‫Okay.
‫But anyway, let's remove all of this.
‫And now the other important thing about state
‫is that we should really only update state
‫using this setter function right here.
‫So not manually.
‫Now, just to finish, I just noticed that here
‫we actually don't need this when we use our step here.
‫So there is no need for a template literal here
‫because here we are not really creating a new string.
‫We are just basically outputting a new string
‫based here on this turnery operator.
‫But anyway,
‫we now have this nice dynamic component
‫all without the imperative dom manipulations
‫that we need in vanilla JavaScript.