Now, we're not gonna have some of the hover effects, or the logos, or any of those kinds of styles in place. Instead, what our goal is going to be, is going to have this really nice grid type thing for each one of the portfolio items, so, it should at least look similar to this by the end of this guide.

So, let's walk through what we need to do. We know that we have our grid in place, we tested that out, and we saw what we were able to do when we pulled the images out. So, we know that we have the right sizes, but how can we make the images work with that?

Well, that is going to teach us some very cool things about React. And one other thing you may have noticed, I have zoomed out, because of the resolution on my screen and how I record. I zoomed this out to exactly the same resolution that we have right here on the design, so you may need to do that as well, depending on what type of screen that you're working on.

And so, what I'm going to do, is I'm gonna walk through the JSX structure of what I wanna implement first, and then we're going to add in the styles. So, let's switch over to Visual Studio Code, and the very first thing I'm gonna do is I'm gonna get rid of this thumb_image_url because what we wanna do, is actually leveraging that image as a background image.

So, instead of just showing the image the way we have been doing, and showing it the way that we're gonna do with the logo, what I wanna do, is actually leverage the CSS background styles, and I wanna manipulate those properties, because if you notice, what we're looking to do if you look at the final design, is those images really are background images.

So, right here we're gonna have a set of divs, each one of these is a portfolio item, and this image is functioning as a background image. But if you've never done this before, you may think that, oh, well, with background images I need to add those and hard code them directly into the style file, and that's not gonna work, because we don't know what the image URLs are until they're passed back from the API, so we can't hard code those in.

So, what we're gonna do, is we're going to place some of our rules here, but then we are going to create the dynamic way of being able to pass in the background image directly here into this portfolio item component. So, let's walk through how to do that. I'll give us a little bit of room, and I'm going to first create what is called a self-closing div.

So, what that means, is kind of like how we called a component, like our portfolio item component, and then we're able to close it off like this.

<PortfolioItem />

Well, we can do that with a div was well. So, I can say div here, and then to close it off, just say slash, and then close it off the same way that we did with the components.

<div
/>

So, because our div is just gonna function as a way of getting our background image to the component, we can just use a self-closing div, and not put anything inside of it.

So, now inside of here, this is where we're gonna first give our className. So, I'm gonna say className=, and then let's just call this portfolio-img-background. Then the other thing we're going to do is learn how to pass inline styles in React. Now, this has a little bit of a different syntax if you've never seen it before, so, feel free to take your time going through this, because it's gonna be a little bit tricky. And so, what I wanna do first, is say style.

Now, right away, if you're used to using HTML inline styles, you may think that it is, styles, but because we're using JSX, it's actually style, singular, equals, and we're gonna be passing in JavaScript code, so we need to use the curly brackets. But because what style expects is an object, we need to use another set of curly brackets. So, I'm gonna put another set of curly brackets, and then that is what we're passing into style.

<div
    className="portfolio-img-background"
    style={{

    }}
/>

So, if you've never seen that before, it might look a little tricky, it might take you a few times to practice it, to kinda get in the habit of using it, that that is the syntax you need to use in order to pass inline styles in React.

So, now that you have that, I'm gonna throw one other tricky rule to you, because I told you I wanted to use a background image, and if you're used to CSS, you'd think that, okay, the background image is background-image and then you pass in a URL, just like this.

Well, as you can see, that's already throwing an error, and that's because, remember, we're not using HTML, we're using JSX.

And so, JSX has a little bit of a trick, and if you've seen it a few times, or once you see it a few times, you will figure it out. But what you do, is anytime you have some rule, like background-image in CSS, that is going to just be translated into the CamelCase form, which means it's gonna be background capital I image, and that is the correct syntax.

style={{
    backgroundImage:

}}

Now we have our backgroundImage, and that is what we're looking for. So, I'm gonna say backgroundImage, and now in a string, we're gonna pass in that rule. So, we need to use string interpolation, which means that I'm going to use a URL, and then there, I'm going to pass in the parens, and then we need to add in the actual URL we want for the background image, which we know is that thumb_image_url, and then we need to close it off. So, add another string that closes it off, and that is all that you need to do.

style={{
    backgroundImage: "url(" + thumb_image_url + ")"
}}

So, that is going to give us what we need for the background image, now we need to go and add those styles. So, come inside of this portfolio-item-wrapper here, and let's add that portfolio-img-background. Now, inside of here, we're gonna add some of the basic types of background image rules. Now, because we're back in a SCSS file, we're no longer using the CamelCase rule.

So, I'm not gonna say backgroundSize, that's just with JSX, and this is something I've seen some students kinda get tripped up on, which is perfectly natural, it's kinda confusing to switch between the two syntaxes, so that's why I'm taking a little bit of time discussing it now.

So, I'm gonna start with a background-size of cover, and I'm not gonna dive too deep into all these rules, because we actually covered most of these in the HTML CSS course. So, I'm gonna say background-size is cover, and then let's say background-position is going to be center, 'cause we want those images centered inside of the div, we do not want them to be repeated, so, that's gonna be no-repeat.

Then, let's give a height of 350 pixels, and then I want the width to just be 100%. So, the width should just take up whatever width the parent div is. So, now let's hit save, come back, and let's check it out. Okay, that looks very nice, this is looking so much better.

You can see now that we have all of our images working properly, they are now fitting perfectly inside of their parent div, and they're functioning as dynamic background images. So, just in review, right here, what we're doing, is we are creating a self-closing div here, and we're adding a background image, and we're making it dynamic.

So, we're passing this in using inline styles, we're passing in the live URL that's coming in from the API, and then from there, we have a new set of portfolio image background rules, which are just the standard kind of background CSS rules that you would use for any kind of background image. The key difference here is instead of having to hard code this in our CSS files, we're dynamically generating it every time this portfolio component renders.

So, nice job if you went through that, and you have this grid. If you did not get this type of behavior, make sure to check the show notes, and to look at the repo that I will post, and it'll have my final code just for this guide, and then kinda see what the key differences are.

I will tell you, one of the more confusing things, or one of the items that can lead to errors is this new syntax for styles, both on having to pass in the brackets, but also having to use CamelCase for any of the style rules, so, definitely double check that. Practice these, play with them a little bit until they start to become second nature.

Resources

• Source Code