In review, state is the data that a component has access to and the data can be any type of data. It can be numbers, it can be strings, it can be arrays of objects, like we saw. So it's a great way at being able to have data that is localized inside of that component so that you can use it for whatever you need.

Now, how can you change the data? Because it really only is half the picture in being able to get data. Technically, we could be doing that anyway. We could create a plain vanilla function and then call it, and then get access to that data. So state isn't really that helpful until you start actually being able to set it or change it.

So that's what we're going to walk through in the next few guides. We are first going to look at a trivial example in this video. In the next guide, we're actually going to build a real feature. It's going to be pretty cool, we're going to build out a way of filtering our portfolio items. But for right now, let's just understand the syntax for being able to change state.

So we'll do that with a pretty basic example. Now, when I say basic, I do not mean that it is easy, this is actually pretty tricky if you've never seen this process before. So I don't want you to think that this is something you should understand right away, this is going to take a lot of practice to get used to because we're going to have to connect a few different parts of our component in order to get this working.

Let's come and let's create a new function. So I'm going to create a function here and I'm just going to call it handlePageTitleUpdate. So the goal of this function is that we should be able to click a button on the page and it should update our page title.

So pretty straightforward as far as what it's going to do, but it gives us a really nice example on seeing everything that needs to happen in order to set our component state. So I'm going to say handlePageTitleUpdate, and it's not going to take any arguments, and then inside of the function, what we need to do... the method that we're going to have is called setState.

So what we're going to do here is say this.setState. So this is something that is built directly into React, so we're going to say setState and then because it's a function, it takes parens, and then it also takes an object. So when I say setState, we have to pass in the regular parenthesis and then pass in the curly brackets because this is an object.

So let's create this setState function, and then inside of here, what we're going to do is we're just going to change the pageTitle. So what we can do is just say pageTitle, and then we're just going to set it to "Something Else", you can type anything you want in there.

The whole process I want to walkthrough is just showing you how you can change that. So this is going to come, it's going to look at our state property, it's going to look at our initial state, then it's going to find this pageTitle key, and then it's going to change its value. So instead of saying "Welcome to My Portfolio," now it's just going to say literally "Something Else," and then it's going to automatically render that on the page.

So how can we use this? Well, we are going to do what is called a click handler or click listener. So we're going to build a way to click on a button, and then have React listen for that event. This is going to be temporary, so let's just come down here. I'm going to give it a just so we have a line here to separate everything out, then from here what I want to do is just create a button.

So I'm going to say button and then Change Title, that's what the button is going to say. Now, the button itself is where we're going to place our click listener. If you've ever written any click listeners in JavaScript, this is going to be similar, but because we're using JSX, the syntax is going to be a little bit different.

So what we have for the name here is onClick and then what we do is we pass onClick a function. So what are we going to pass? Well, we're going to pass this handlePageTitleUpdate function. So we're going to use curly brackets and inside of here say this.handlePageTitleUpdate, close out your curly brackets, hit save.

Now, we may think that this is going to work because we're calling handlePageTitleUpdate, and theoretically it seems like it might work, but let's just go check the browser and let's see. I'm going to open up our dev tools here and let's watch what happens, you can see we have this Change Title button here, but if we click on it, we get an error and it doesn't actually change the title.

So what error does this give us? It says Uncaught TypeError: Cannot read property 'setState' of undefined. That is a little bit abstract, and part of the reason why I wanted to show you the error first is because whenever we're learning React, this is going to be something that is a little bit trickier.

It's funny, I was watching one of the main creators of React, so he's a developer that actually maintains the React code and adds new features. I saw him doing a live coding webinar and he actually ran into this error while he was live coding and he had to fix it. So that's part of the reason why I wanted to keep this in here was because you'll probably run into this error and it's a little bit confusing, and if the actual creator of React runs into this error, there's probably a chance that you and I are as well.

So whenever you see that error, the typical fix for that is that even though we've defined handlePageTitleUpdate, we need to let the component know that it should have access to the keyword "this." So it needs to know that it can have access to all the data for the component, and the way that we can do that is to come inside of the constructor and type this.handlePageTitleUpdate = this.handlePageTitleUpdate.bind(this);

I believe that is the syntax.

So let's come back and hit Refresh and see if this is going to work. So now if I click on Change Title, you can see, yes, it says Something Else.

So, what are we doing here? Well, I have a video dedicated to what bind does in JavaScript, and so I will place that into the Show Notes because if you've never seen bind in a application before, in a JavaScript application, it can be a little confusing.

So even if you've seen it before, seeing what it fixes may help you understand why it's important. So what we're doing here is we're saying that this function here needs to be tied and needs to be bound to this instance of the component. So this PortfolioContainer, whenever it is created and rendered on the page, we need to bind handlePageTitleUpdate so that it has access to all of this data, such as the page title, so that we can connect it and call this.handlePageTitleUpdate. So this is a way of binding the state and the data of the component to this custom function.

So a very natural question would be why did we not need to do that for portfolio items? Because, as you notice, that simply works. We are able to call it and we're able to even call it directly inside of the view and we're able to use the keyword "this."

The reason for that is that whenever you're building out items, such as click listeners, you have to be able to give that click listener or that function that you're passing it to, you need to connect it directly into the component, and whenever you have a custom function, then you need to be able to be a little more explicit with it.

So you need to say, "this has access to the 'this' keyword, to the data inside of the component even when it is inside of a click listener." That, I know, is confusing, but that is what the key difference is. Whenever you have a click listener or any type of event listener or anything like that, you need to bind that function directly into the component, and that is what we're doing right there.

Now, in review, so those are each one of the items that we have in there. Now, in review, how do we set state again? Well, we call this.setState, and that is a function, and then we pass in an object, and inside of that object, we pass the key and that is the key that we defined in the initial state here, and then we pass in whatever that new value is, and that is how you can update the state in React.

Resources

• Source Code