What we're gonna build out in this guide is gonna seem pretty simple and your very first thought when you see it is probably going to be that we could simply place all of that inside of a div, inside of our blogRecords variable here and that is completely true but you're gonna see as this section continues, we're gonna add the ability to strip the HTML tags from our content so that they don't show inside of these iterated summaries.

We're going to do things like truncating the value so that if you have a long blog post, it doesn't take up the entire page on what should just be our list of items, so it's gonna build out essentially a summary feature and we're gonna do a number of tasks like that.

So, you're gonna see that this blogItem component is actually gonna get relatively big and you would not want all of that code right here inside of your render function, so that's the reason why we're going to pull all of this out and then we're gonna have a dedicated blogItem function that we can use and it can be more isolated.

So, let's start off by creating this. So, if you open up your file list and I'm not gonna put this in pages. So, I'm gonna create a New Folder here called blog, so New Folder called Blog and any dedicated blog features are gonna be able to go inside of here, kind of like what we did with the portfolio.

So, inside of Blog, I'll create a new file called blog-item.js and this is where our blogItem component will be and I'm going to use a slightly different syntax just so you can see the difference.

I'm gonna first 'import React from react' as usual just like you have to do with every type of React component and then from there, what I'm gonna do is I'm gonna say const BlogItem and I'm gonna use the fat arrow function, so I'm gonna say BlogItem equals, we're gonna take in props, this is gonna be an argument 'cause we need to be able to receive props so we know what the title value is, what the content is, what the link's gonna be, that kind of thing.

So I'm gonna say props equals an arrow function and this is what's going to get returned, so this is going, I know this is a slightly different syntax than you may have seen but I wanted to show it you a few different ways.

So, I could have written this out exactly like this where I could say function and then BlogItem just like this and then we could have, I should say export default function just like this and with this syntax, we still have to export it but the traditional way of doing it is by saying export default BlogItem.

So, this would be one way of writing this with the arrow syntax, this would be a second way of writing it.

const BlogItem = props => {

}

export default BlogItem;

export default funciton BlogItems() {

}

It does not make any difference whatsoever but the more React that I see, I am starting to see a lot of developers write their code more like this first option, so, I wanna show you both ways of doing it. So, now that we have that, we know we're receiving props but what props are we going to get?

I think it makes the most sense that our blog component is simply gonna send us the entire BlogItem object and so, that is what we should expect to receive. Now, inside of that BlogItem object are gonna be a number of attributes and we can look at DevCamp Space to see what we're going to get.

So, if I go to Blog, I can see we're gonna get an id, a title, content, a blog_status and then also featured_image and if you remember from our portfolio, we need to also add a _url because that's what the API returns.

You could also view all of this if you just console logged it out as well, but those are the values that we wanna bring in.

So, knowing that, that means we are going to get an object with those values and so, what I wanna do is to destructure that. If you remember, because it's been a little while since we've done destructuring.

Destructuring is where you create a const variable but instead of saying const and then something equals something else, what we're going to do is say const and then inside of curly brackets, we're going to list out the values that we wanna pull out of an object.

So you say const, curly brackets equals some object, some type of object and this only works when you know the keys inside of the object, so all that's gonna happen is it's gonna reach in and it's gonna grab, in our case, the id, then it's gonna grab the blog_status, then it's gonna grab the content, then it's gonna grab the title, then it's gonna grab the featured_image_url and so what that object needs to contain are keys with each of these values.

blog-item.js

import React from 'react';

const BlogItem = props => {
  const {
    id,
    blog_status,
    content,
    title,
    featured_image_url
  } = something
}

export default BlogItem;

I know if you've never done destructuring before, or if this course has really been one of the first times you've used it, this can look really weird but all we're doing is it's a shorthand syntax so that you don't have to do something like this, so you don't have to do const id equals and then someObject.id and then const content equals someObject.content, that kind of thing.

const id = someObject.id;
const content = someObject.content;

This is the shorthand syntax of doing that and that way we can reference id, blog_status, all of those very easily inside of our code.

const BlogItem = props => {
  const {
    id,
    blog_status,
    content,
    title,
    featured_image_url
  } = something
}

Now that we're doing all that destructuring, we should actually name this properly, so I'm going to name this the blogItem, so we'll say props. and then blogItem and we know this is gonna be called that because we're gonna be the ones that name this.

So, now that we have that blogItem, now we can return some JSX code, so here I'm gonna return a wrapper div and then inside of here, let's put our h1 so we'll do the h1 this will be the title and make sure you have that in curly brackets and then let's also inside of a div, let's put our content and then we're not gonna use these other values yet.

We're going to use them later on but for right now, let's just make sure that all of this is working, so in review, we have this BlogItem functional component, it takes in props, specifically, it's gonna take in a prop called blogItem which is an object that contains each of these keys. We're then going to destructure those and then call them from JSX and get rendered out.

const BlogItem = props => {
  const {
    id,
    blog_status,
    content,
    title,
    featured_image_url
  } = props.blogItem
}

Now, once all of this is done, we need to come into our blog itself and import this. So, I'll say import BlogItem from and then inside of a string, let's go and check our path. So, we know that we're in pages, so we need to get to blog, blog-item, so we need to jump back one directory and then we jump into the blog directory and then we grab the BlogItem.

So we'll say from .. to jump back, /blog/blog-item and that should be all we need to do there.

blog.js

import BlogItem from "../blog/blog-item";

And now, we can go down and instead of returning this h1 what we're going to do is we're gonna return the BlogItem and we need to pass into it first a key. Remember, any time you're iterating over any type of record, it could be a component, it could be a div, it could be anything, you're gonna get a warning if you don't pass in a unique key.

So here I can say the key's gonna be the blogItem.id 'cause that's always gonna be unique, and then we want to pass in our blogItem as our prop and I'm gonna call it blogItem like we already talked about, so blogItem equals curly brackets blogItem and then make sure to close that off with a slash and then close the entire tag.

blog.js

render() {
  const blogRecords = this.state.blogItems.map(blogItem => {
    return <BlogItem key={blogItem.id} blogItem={blogItem} />;
  });

  return <div>{blogRecords}</div>;
}

So, let's hit save, if everything we've done worked, that means we now should have an h1 with a title and our content for every one of our records. So, let's go and check this out, and yes, it looks like that is working perfectly.

Now, you may notice that we have some weird-looking code here and that's because when I was building this out, I built records with HTML and images and so, we need to pull those out and we're gonna do that at a later time. I'm gonna wait though until you actually have some HTML code yourself, so I'm gonna wait 'til after we've built in the rich text editor and then you'll see that your content also looks like this but for right now, this is working perfectly.

We have our title, we have our content, it's iterating over and all of this is working really nicely. In the next guide, we're gonna build out a dedicated detail page. So, we're gonna have the ability to click on one of these titles and be taken to a page where you can see the title, the image and then all of the content.

Resources

• Source code