A sidebar list component that we are going to pass that state data to so that it can render it on the page, exactly like what we see right here, where we have all of these thumbnail images, their titles, and ids. Now, don't let the style scare you, this one is just a prototype, we're going to add some nice styles to kind of finish it off and make it look a little more professional.

So, let's start by building out that sidebar list component. Opening up Visual Studio Code, I'm going to go into the portfolio directory here. Create a new file called portfolio-sidebar-list.js just to make it really clear that this is a list, it's a collection of items.

And inside of here, I'm going to create a functional component. So I'll say import react from react and then inside of here I'm going to create the function that the component's going to be stored in. So, we'll call this portfolio sidebar list, it is going to be an arrow component, a fat arrow component.

It will take props and then we need to make sure that we are exporting it as the default. So say export default PortfolioSidebarList; just like that. Now, with that in place, we need to make sure that we're also returning something from this function.

So I want to return a div, so right now, let's just test this out and make sure that we're calling it in properly. So I'm going to say return div, close that div out, and say list.

portfolio-sidebar-list.js

import React from "react";

const PortfolioSidebarList = props => {
  return <div>List...</div>;
};

export default PortfolioSidebarList;

Just make sure that this is working, so we'll call this portfolio sidebar list from within the manager. So import, portfolio sidebar list from, now the path here, this portfolio manager remember is inside of pages. So in order to get back to our portfolio directory, we need to go two steps back, or I should say, one step back, two dots back and then say portfolio/ and then let's just reference this just to make sure.

So we're in pages here, and then we need to get in portfolio, yes, so that's correct. And we want portfolio-sidebar-list. I'm just going to cop this just to make sure there are no typos, and then paste that in. So, that is the file, we don't need the .js, hit save.

import PortfolioSidebarList from "../portfolio/portfolio-sidebar-list";

And now that we have that we can get rid of our placeholder text here, and we can now call our portfolio sidebar list. Make sure you close it off, hit save, and now let's go back to Chrome. And there you can see, it's kind of hard to see because it's so small, but it does say list.

So we have created the functional component, and we have called it now from the manager and it is rendering. So, that is the first part, we have the component, but now let's actually do something with it. So remember we need to pass props to the sidebar list.

So, I'm going to pass a prop called data, and then inside of here call this.state.portfolioItems. So this is in portfolio manager, we have access to state portfolio items, which is going to be populated when we call get portfolio items with that array of 12 items.

And then we're passing it to a prop called data, and that is then going to be accessible inside of portfolio sidebar list. So, this is everything that we actually have to do inside of the portfolio manager, so, I'll close that off. And now that we have access to props here, now we can build that list.

So, instead of trying to do it all in the return statement, because that could get a little bit messy, what I'm going to do is create a function inside of here called portfolio list, and then inside of here, I'm going to map over, remember, whenever we want to iterate over a collection of data and to build up a full component of data then we use the map method.

So here I'll say props.data because data is the name of the prop that we're getting passed. If we called this portfolioItems or anything like that then we would call it that. But we got a prop called data, and then from there, we're just going to map over that function. And each time we map over, remember the way map works, each time we get access to one element, and then you have to name that element, so I think it makes sense to call this portfolio item.

Then from there pass in an arrow function and curly braces. So everything inside of here that gets returned is going to build up that portfolio list. So, the first time it's going to go through our first item, it might be devcamp or it might be whatever you have listed as your first item. Then we have access to all of that data.

Let's take a look, let's try to make this as straightforward as possible before getting into the details, such as adding images and those kinds of things. Let's create a return statement here, and then inside of here, return a div. So I'm going to return a div, and let's just return a couple of things. So in an h1 tag, let's return the name and so we know that we can have access to that inside of curly brackets.

Say portfolio item, because that's what we called it right here. And then from there, we can just call, I believe it is name. And then let's do an h2 tag and say portfolio item ID, and then that's going to give us our h2 tag. So if we have everything correct here, we should get at least all the names of our items.

And then inside of, instead of just hard coding list here, what I want to return is actually that set of portfolio list items. So right here everything when we mapped over, it got stored in this variable. All of these divs, all of those records got stored there, so now we can call them.

So, inside curly brackets, I'll say this, or I don't have to say this, sorry we're in a functional component. It's a reason why we like to use functional components, so you don't have to use this. And so here you can just call portfolio list. Okay, hit save, and let's see if this is working. Switch back to Google Chrome, yes it is. You can see, we have access to the name, to the ID for each one of these records.

So that is all working beautifully. So let's come now and see what else we want to add, we know that we want to add the image, we want to make sure the image is at the very top. If you look at the prototype, you can see we have this big thumbnail image followed by the ID and the name. So, let's switch back here, and let's see what we need to do in order to access this image.

I'm going to just start by creating a div that we're going to wrap this in, later on, we'll add our classes for that. And then here I'm going to add an image tag, which is going to have a source of portfolioItem. and then I believe it is thumb_image_url, and then make sure you close off that image tag.

<img src={portfolioItem.thumb_image_url} />

So, now let's hit save, come back, and there we go, we get access to each one of those images. And if you're curious about in case you forget any of the names or anything like that, if you go into devcamp space, remember all of those names are the same ones here in the header. If they're the image, they just have URL at the end of them and you can obviously access those inside of the react dev tools or by console logging them. So just in case you ever forget the exact name that is how you can do it.

So, we have these images, but obviously they're taking up too much space. They're taking up all the space that they actually are at their core size. But don't worry about that, we're going to be fixing that in the next guide.

So, let's review what we've done here because we wrote quite a bit of code and I want to make sure that nothing got missed. So, we created a portfolio sidebar list functional component a presentational component. This takes in props from the parent component, from the portfolio manager, and the props specifically are the portfolio items.

We created this portfolioList function, and the only role that this function has is to take in the props to iterate over using the map method here to grab the portfolio item and to wrap up that portfolio item inside of a div to call the image, to call the name, and the ID. And then it returns that collection. So it returns all 12 inside a portfolio list.

You can think of this as being able to wrap up each one of those items and to decorate them. So it's taking each one of the portfolio items and it's saying, okay you started as an object, you started as this array of 12 objects. But that's not going to work, we can't look at objects on the screen. Instead, we are going to handpick certain elements inside of that object, put it inside of a div, and return an array that contains 12 divs.

That's exactly what we're doing right here. And then we return that portfolio list wrapped up in its own wrapper div. And that's exactly what we're doing, and that's what we're calling from the parent component and that's how we're able to get this behavior.

So now that we have all of that, in the next guide we are going to style these items so that they fit within the type of grid we're looking for.

Resources

• Source Code