We are going to be using constructor functions with every type of class component that we work with for the most part, just to perform basic setup. I also want to get into custom functions.

So, in React, and in React class component, and also with the functional components, you have the ability to create your own custom functions. So, this could be any type of behavior that is different than, say, constructor, or the life cycle hooks we're going to talk about later.

So, we're going to walk through one of those right now, and this is going to introduce us to a very important concept, which is the ability to loop through data and to be able to render that out on the page.

So, in review, you remember when we had these portfolio items, and if we wanted to say, have four of them on the page right there, then we go do that and I'll hit refresh here, and now, you can see we have these four portfolio items.

So, that's working, but you're typically not going to have that kind of data hard-coded. The usual process is you're going to have data coming in from an outside source, like an API. We're going to get into that in a few sections. So, we're going to be pulling in live data, and then we're going to need to loop over that data, and then render it.

So, it's kind of similar to what we're doing here, where we're going to be adding all of these portfolio items on the page. But it's going to be different in the fact that we're not going to know how many data elements we're getting.

So, in a normal, real world application, you may be getting one item back, you may get none back, you may get a thousand. It really depends on the type of data that you're working with. So, we need to be able to have dynamic behavior, and that's a really good way of understanding and using a custom function.

So, I'm going to actually get rid of all of these portfolio item calls here, and we're going to go up, and you can place this anywhere within the class, it has to be outside of the functions here. So, I'm going to put it right in between our construction function and our render function. I'm going to call this function "portfolio items" and it's not going to take in any arguments, and so, it's just going to look like a standard class function, just like we have right here.

Now, I'm going to give us some setup data to work with. Later on, we're going to pulling this in from an API, but for right now, let's just create an array. So, I'm going to say const and data equals, and then I'm just going to give some names. For right now, we're not going to use these names except to loop over them, but later on, I'm going to show you how we can do some pretty cool stuff with being able to bring in data directly into the loop and build our components and pass data to them.

So, I'm just going to give some names of some companies that I've worked for in the past. So, I'll say Eventbrite, Quip, all in strings, Ministry Safe, so those are three companies I've worked for. Because this is a portfolio, we're going to be looping through the companies that I've worked for, and eventually it will be the projects that you've built, and later on, the companies that you've worked for.

Now, under here, now that we have our data, it's just a regular, plain JavaScript array. Now what I want to do is I want to loop over this data and simultaneously build a list of portfolio items. So, there is one way that's the recommended way for doing that in React and it is using the map function. So, that's the map function just like that.

So, the way that we can do this is we need to say, return because we're returning data. And then I'm going to say, data.map and then inside of map, map takes a function.

If you're relatively new to React, and especially if you're new to JavaScript, that may sound weird because we have a function and we're passing another function into it. So, I don't want you to get too caught up if that sounds a little confusing. I simply want you to realize we are taking this map function, and then we need to give it a process that it's going to perform.

So, it's going to take in an argument. So, every time it loops through this list of data, this array of data, it is going to grab the first element and we need to tell it what that first element is, we need a way of keeping track of it. So, I'm going to call this, let's just call this item, you could call it anything.

You could call it i, you could call it e, you could call it a, you could call it asdf, this is completely up to you. But I'm going to call it item, because I think that describes what it is, it's a portfolio item. And then from there, we're going to pass in an arrow function. So, this is the process that we want it to run, and then curly brackets. So, that is a syntax for building a map, you first pass in the item, that's how we keep track of it.

portfolioItems() {
    const data = ["Quip", "Eventbrite", "Ministry Safe"];

    return data.map(item => {

    })
}

So, now the very first time that we go through this, it's going to be Quip. Then, the second time the loop goes through, it's going to be Eventbrite. The third time, Ministry Safe. If we had 100 items, it would go through each one, and then each time that item would represent whatever that value was, and we can do whatever we want with that.

So, right here, we're not actually going to call item. Later on, I'm going to show you how we can do that, but for right now, I just want to take a dead simple approach to this. So, I'm going to say, "return." So, we have map always needs to return something, if you forget to do this part, you're going to end up with an empty array and you're going to be confused. So, every time that you loop through, you need to return something.

And what we're going to do here is we're going to return that portfolio, not container, that PortfolioItem, make sure you close it off. So, this is something if you've never seen this syntax before. I remember the first time I saw it, this was very weird. But because this is React, we can actually use JSX directly in our custom functions just like we're doing here.

So, we can loop through data and then have it map. So, what map does is it builds up a collection, so each time that we return a new item, it's actually going to be stacking it on top of the other items. So, we're going to, at the end of this have because this has three elements in the array, we're going to have three portfolio items.

So, that's how it's able to be dynamic, so we're not hard-coding anything in. We are saying for as many items are in that array, or later on, as many items that come in from the API, then I want you to give me back that many portfolio items.

So, with all of that, that's all we need to do for our custom function. Now, if we come back down here into this render function, now I'm going to use curly brackets, because anytime as you remember back when we integrated moment, anytime that you want to slide some JavaScript code into your render function here, you need to use curly brackets.

And I'm going say, this.portfolioItems and because it's a function that we want called right away, make sure you add the parens at the end of it, hit save. And now if you go back and switch over here, you can see we still have three items. So, it has looped over each one of those three.

Now, if this is still a little confusing, I definitely recommend for you to play with this. So, let's explore it a little more, just so you can see what's going on. So, I could add another one on here at the end. I could say, SwingAway, hit save. And now you see there's a fourth item.

So, do you see how this is dynamic in nature? As we're mapping over that, it is building it. If I were to take two away, we'd just be left with two items. So, that's the way that map works.

Now, how exactly does this portfolio item work? Well, we're just calling the component exactly like we called it down below. If I wanted to do something like this, let me just come over here, and instead of PortfolioItem, let me just put a h1. So, if I wanted to put an h1 here, and then close off the h1, I could actually call item just like this.

return <h1>{item}</h1>;

I'm not going to do this later on, but we're going to eventually be able to build all of our portfolio items and then pass in data each time they're looped through. So, this is kind of a preview of that.

So, if you hit save and come back, now you can see we are looping over and actually grabbing those names.

So, that's really neat. We are dynamically building all of our data and we are no longer hard-coding anything. And so, React allows us to adjust and bring in that full collection. So, let's switch it back because I do eventually want to be using our component. That's why we created it, and we're going to learn how we can pass data into it in a little bit.

But that is, in a nutshell, how you can create a custom function, how you can iterate over data in order to build a collection, and then how you can call it from a render method.

Resources

• Source Code