I know I'm throwing a lot of content and new information towards you, but hopefully it's making sense and you're starting to feel a little bit more confident on what React is doing behind the scenes.

This is all focused on the React fundamentals and so sometimes if you're more familiar with it, it might be tedious. If not, then it may feel like you're drinking from a fire hose and you're getting a lot of information. If you are feeling that way, then my top recommendation is keep going through the videos. It's perfectly fine to go through it multiple times. If you hear a concept that maybe you feel like I didn't even explain perfectly, then go and research that topic.

That's exactly what I do when I'm learning a new language, or a new framework, I'll start going through step-by-step tutorials and then when there's a concept I don't really understand, maybe I didn't pick it up the first time when the instructor said it, then I start Googling for that topic and I find other people who've written articles about it, or maybe they're tutorials or deep-dives directly into that specific thing.

It could be JSX, it could be props, or anything like that. The more you can take that approach to learning, the better you're going to be, because you're not always going to have a step-by-step tutorial when you're building out your projects. You're going to have to be able to adjust, and research on your own, and so this is a great time to start getting in the habit of that.

With all that being said, in the next two guides we're going to go through one of the more complex topics when it comes to working with React, and that is state. State is kind of what it sounds like, it is the state of your application, or I should say, the state of your component.

Your component has the ability, as long as it's a class component, it has the ability to manage its own state, and that's usually related to data in some form or another. In this guide, we're going to see how we can create and define some initial state and how we can work through that, access it, and then render it on the page.

In the next guide, we're going to see how we can actually set state. So let's start off now by actually refactoring our portfolio item. Instead of hard-coding this value directly into the portfolio item function, we're going to create state. And so we are going to get rid of our console log statement that we have here in the constructor, and the syntax for creating state in React is by saying, this.state =, and then you define an object.

Before we even get the data in, let's go with a dead simple example. so for this.state =, if I wanted to say something like page title, I'd define it just like a normal key value pair. Then I'll say, "Welcome to my portfolio." The way that we can access this state is by going down, and you can do this in any function. You could do it inside your custom functions, you could do it anywhere.

We're going to call it, inside of the render function. I'm going to in this H2 use curly brackets and say this.state.pageTitle.

portfolio-container.js

return (
    <div>
        <h2>{this.state.pageTitle}</h2>

        {this.portfolioItems()}
    </div>
);

Now if I hit save, if I switch back into the browser, now you can see it says, "Welcome to my portfolio."

So what we've done is we've declared what is called an initial state, so whenever you add this.state = into your constructor function, that is called initial state because it is the state that your component is going to automatically get whenever it is called. We have performed that initial state and then we called it, so we said, "I want to call it this", and remember with this, we're referencing this component's instance.

I'm saying, "I want to access state and then the page title item inside of state." So that is working, now let's refactor our data so we can actually call state from our custom function. What I can do here is add a comma, because this is just a regular from a syntactical point of view, it's just a regular JavaScript object. I'm going to say data here, then let's pass in that full array.

Instead of having it in a variable, I'm going to come right here and have the array just like that, make sure you get rid of the semicolon. Now we can also get rid of where it says const data and then later on we're going to call it. Now, because this is an array, I want to switch it up a little bit.

Because we're going to be planning on having more than just a title, so we might as well see how we can add a nested object. I'm going to get rid of these curly brackets, or not ... I'm sorry, we need to add a curly bracket here.

For each one of these items, let's make them into an object. I'm going to say, title equals quib and then we're going to do that for each one of these. Give a comma and then same thing with curly brackets for Eventbrite, make sure you end the curly bracket.

As you can see here, what we're doing is we still have an array, so we have a collection of data, and then we're just creating objects inside of here. Each one of these is going to have a title option and then last one for SwingAway, end with a curly bracket and then make sure you end with regular square brackets there.

portfolio-container.js

this.state = {
    pageTitle: "Welcome to my portfolio",
    data: [
        {title: "Quip" },
        {title: "Eventbrite" },
        {title: "Ministry Safe" },
        {title: "SwingAway" }
    ]
};

Now what data is, is data is now an array of objects. The way that we can call that, is if we come down into our portfolioItems function, I can say return and say this.state.data and then it's going to be mapping over it and it's going to be still returning us an item. But now this item also has a title value here, so I can't just call item any more like we were doing before.

Now I want to call item.title, now we are calling all of this from state. As long as I did not have any typos or anything, we should have exactly what we had before. And we do, you can just hit refresh just to make sure.

You're pulling in now each one of the names here, those titles. We still have access to the URL, because that was hard-coded in, but now instead of having each one of these elements hard-coded into the portfolio items, now they're in state.

The cool thing about this, and this is what we're going to walk through in the next guide, because they're there, now we can actually have other parts of the component communicate with them. We can perform tasks on these other items, we could click a button and have one removed, we could edit it, we could do all kinds of things because this is now in the component's state, we have access to it however we want.

Just in review, in order to work with state inside of React, you create a class component, which we already had. Then you create an initial state where you list off what type of values you want to start off with and then to access that, to get the state you just call this.state and then whatever the name of that particular property is, so we called that for page title, and then we called it from data.

Resources

• Source Code