Now what I wanna do is I wanna show you how we can clean up our portfolio item component here to follow some React best practices and also make it a little bit more manageable to be able to extend this component's functionality. So our portfolio item right now has all of the various props passed directly into it.

So it has key prop, a title, a URL, and then a slug, but we also have the ability in React to pass an object as the key. So what we can do here is we can clean this up. We need to keep our key here, but I'm gonna get rid of these other props, and instead, I'm just gonna say item equals curly brackets item. So now I'm passing in this entire item object so that we can get access to all of the data that we're going to need.

portfolio-container.js

return this.state.data.map(item => {
    return (
        <PortfolioItem
            key={item.id}
            item={item}
        />
    );
});

I'm also gonna pull out this comment and I'm going to now add this into the portfolio item here. So this is gonna be the data that we need and we're also going to see how we can leverage destructuring. Now, destructuring in JavaScript, if you haven't done it a lot, is a way where you can have an object and then pull out the keys and automatically assign them to variables. You're gonna see this in a lot of React projects so it's good to practice it in situations like this.

So we know that we're going to need the background image, which is called thumb_image_url, we know we're gonna need the logo, the description, and the ID. So let's come down here, and right below this comment I'm gonna add a variable called const, and in order to implement destructuring, I'm going to place in curly brackets here and then give the names that we're looking for.

So let's start off with the id and then from there I'm going to pass in the description, then I want this thumb_image_url, which I will just copy, and then lastly the logo. So now with all of this, the way that I can perform the destructuring is after this saying equals and then props.item because we're going to be grabbing that item.

So I'll hit save, and now we don't want this title any more, and we don't care about the URL, so we can remove those. And now we do not have prop slug, we just are gonna have access to the id directly. So here I can just say id, and the reason why we can do this is because we extracted, so we performed destructuring and we grabbed the id directly from props.item.

So now let's see if we have access to everything else. So we have that link, now let's see if we have access to the description. I'm gonna create a div here, and inside of the div, I'm just gonna say description, and let's just hit save here. Let's not even get into pulling in the images quite yet and make sure that we haven't broken anything.

So if I switch back to Google Chrome, you can see this is working perfectly.

Our link still works, it has the correct slug, which we're using the ID for, and then we also have the full set of descriptions coming in from the API. So this is working perfectly, and we've cleaned up our code quite a bit. Here we no longer have to call props anymore because we only do it one time, and then when we're calling this portfolio item, instead of having to hard code each one of the names, now we have the ability to just pass in the item directly.

Resources

• Source Code