In this lesson, I'm going to do a deeper dive on components state. Before we jump in, let's go over where we left off. Okay To recap, we have a joke button that fetches a joke every time it's clicked, and we currently log the joke to the console. Next, I want to update our app so that the fetch joke is rendered to the screen. In order to do that, though, we'll need somewhere to store the fetched joke value. In a non react setup, you might think to store the value in a variable like so.

And when a new joke is fetched, I'm going to update the value of the joke variable with the fetch joke. If you call the joke API returns an object that includes ID joke and status. instead of storing the entire joke object, I'm just going to store the joke itself. I'm also going to log the value of the joke variable just to make sure it's updating. And lastly, I'm going to add a wrapper div element around our button. Insert a paragraph element and then set the contents of that paragraph to the value of our joke variable.

Okay, let's give this a try and see what happens. So we can see that our job variable is being logged in the console every time the button is clicked. But we're not seeing anything update on screen. How come? The reason we're not seeing any updates on screen is that react doesn't know anything has actually changed. React component will only rerender when its props, or state have changed.

In the case of our app component, a render occurs each time the app function is run by react, I'm going to add a console dot log to our app function. That way, we can see something logged every time the component renders. As you can see, render is logged out for the components initial render. But notice each time I click the joke button render is not logged out, even though the joke variable is updating. This is because changes to our joke variable are not being tracked by react and therefore aren't trigger a new render. It looks like if we want app to update when a job changes, we'll need to start joking either the components state or props.

So which one do we use in this case, props are passed into component and are read only meaning they can be changed, where a state holds information about the component and can be updated. With that being said state looks like the right choices we will be needing to update the job value as we go. Since functional components don't have access to state the first thing we'll need to do is convert app to a class component, start by changing the app function to a class that extends from react component. then convert joke into a class property. Next we'll need to convert the on tell joke function to be a class method instead. And then lastly, instead of returning elements directly, we use the render method and return elements from there instead.

And now that untell joke and joke are both class variables, we need to add this in front of them. Okay, it looks like we're rendering without errors, but let's try the joke button again. Looks like we broke something in code sandbox is nice enough to tell us exactly what there is cannot set property joke of undefined. It turns out we caused this error when we change the on tell joke function class method. This is because class methods aren't bound by default instance on tell joke is called from a click handler. The reference to this is no longer scoped to the component but to the button.

Hence, we get an error when trying to set a value on this thought joke. While there are multiple solutions to this issue. Choose to explicitly bind each method to the component in the constructor, or component doesn't have a constructor right now. So let's start by adding one. Since all components extend from reacts component class, you need to ensure that you call the super method before doing anything else. I'm going to take this on tell joke method and reassign it to a version of that method that is bound to the component.

So now even though on tell joke is called from a click handler, this will reference the component and not the button. Okay, with that fixed in place, let's go ahead and try our joke button again, awesome, no more errors. And now that our component has been successfully updated to a class component, we're ready to start using local state. Let's start by removing our old joke variable as is no longer needed. Instead, we're going to create a new job variable in our components state. When adding state values to your component.

I'll usually start by adding default values. This is done in the constructor by directly adding values to the components state property, I'm going to go ahead and add job to our state and set it to normal to start with, it's important to remember that this is the only time you should be modifying the component status. For state updates, you always need to use the component set state method, which will now use to update our state every time a new joke is fetched. Let's start by removing our reference to our old joke variable. Let's replace that with a call to this dot set state. Next, we'll pass that state an object with our updated state values.

In our case that will be passing in our new fetch job value. When using set state, it's better to think of it as a request rather than an immediate command to update the component. This is because state does not always immediately update the component it may batch or defer the update until later. This makes reading this state right after calling set state a potential pitfall to avoid these pitfalls with set state I recommend reading reacts official docs on the subject as it's a critical piece when dealing with more advanced react topics. Now that we've hooked up our set state calls, let's update our paragraph element to use the joke state instead of our old joke value. All right, let's see if that made a difference.

Nice. Now when we click the joke button, our new joke is being rendered to the screen. You'll also notice that render is now being logged every time I click the button. This is expected As each button unclick is triggering a state update and each state update triggers a rerender. Okay, that wraps up the introduction to component state. Next up, we'll take a look at another important react feature lifecycle methods.