The reason we're doing this is that in our post.js file we are mentioning this or we are referencing this.props.title, and you might be wondering how we're getting the title out of there and into our post component.

I'll briefly be explaining that, and since we've already talked about it, it shouldn't be too much of a mystery to you. But the main thing we'll be doing is completing our recent post component and the functionality of it in this guide.

You'll see in the completed app we have each of these titles, but they also have a small list of associated topics underneath.

Basically ,we just want to get these associated topics into the bottom of our application. You'll notice that each one of these objects has an associated topics array within an associated topics collection.

We just need to get those into their own little divs or tags and display them underneath. Pretty easy stuff.

Now in order to do that we need to reference associated topics, so all we have to do in our post.js is say this.props.associatedtopics but first, I want to explain how that works.

What we're doing here is using the spread operator and this is no different than writing it out each item.

Using the spread operator is just a really nice shortcut and we don't have to write out each one of these things. Another really awesome benefit of doing this is if omething changes in the future, like from the API, we don't have to come back and change it.

If something is added such as an image, We won't have to type out that image. We don'thave to come back and change that. Now we might have to come back and change the post component to display that image but this is just going to print.

We know that it's already being mapped over to the component because we're using the spread operator and then we can just go into our post component we don't even have to modify recent posts because we know it's going to contain the image.

All we have to know is that we have an image now on the post and that's the only change we need to make in the future. So that's a really nice benefit of using the spread operator, and it keeps things really clean with a lot less code.

That's how that works, and if you don't understand how the operator works, I went over it a couple of apps ago using code pen. If you remember that and were following along, just go there and play around with it and if you don't just I'd recommend just going to Google.

Now, we use this spread operator quite a bit with redux, like in our postReducer.js.

You'll notice we're using it right here, and so that you can understand it a little further I'll explain how this works. Basically, it's taking our posts from the server and it's saying to put the posts into our recent posts, and it's overriding reason posts.

Now lets go ahead and get those associated topics. Go ahead and try this on your own, so pause the video and do it on your own.

I will build it out right now. The way we're going to do this is by going into our post.js. Now, instead of having it just render this.props.title, Let's make a couple more tags here.

post.js

import React, { Component } from 'react';

class Post extends Component {
    render() {
        return (
            <li className="recent-post">
                <div className="recent-post__title">
                    {this.props.title}
                </div>
                <div className="recent-post__topics">

                </div>

            </li>
        )
    }
}

export default Post;

What I want to do is create a separate function where we can render these topics, so let's go above our render function and let's just create a render topics function.

post.js

import React, { Component } from 'react';

class Post extends Component {

    renderTopics() {
        let topics = this.props.associated_topics.map((topic, index) => {
              return <span className="post-topic" key={index}>{topic}</span>
        })
        return topics.
    }


    render() {
        return (
            <li className="recent-post">
                <div className="recent-post__title">
                    {this.props.title}
                </div>
                <div className="recent-post__topics">

                </div>

            </li>
        )
    }
}

export default Post;

Now we can even create a separate component for this but I won't for now, and we might later on but just since it's all one line it really doesn't need to be its own component. It's not going to get too messy with one line.

We'll return at the bottom just so you can understand, we'll this variable name to keep things clear, that way we don't have to put in comments. It's really good to just make really good variable names and make your code readable and it keeps your code clean.

Now that we are returning the topics, all we have to do is run this renderTopics function.

post.js

import React, { Component } from 'react';

class Post extends Component {

    renderTopics() {
        let topics = this.props.associated_topics.map((topic, index) => {
              return <span className="post-topic" key={index}>{topic}</span>
        })
        return topics.
    }


    render() {
        return (
            <li className="recent-post">
                <div className="recent-post__title">
                    {this.props.title}
                </div>
                <div className="recent-post__topics">
                    {this.renderTopics()}
                </div>

            </li>
        )
    }
}

export default Post;

We should be good, so let's check our application and see if it's returning them.

Yeah, it looks like we're rendering them. Now I don't want to apply it to many styles here because we want to get the functionality down first but this might be a little confusing so what I'll do is put a margin in between each these.

Let's inspect the code in the browser. You can see that now we're getting all of the various topics, and that's what's so great about programming nowadays, that we have these awesome tools, like react, to really make our code very easy to generate content really quickly without typing and hard-coding everything.

Let's go ahead and apply some margin to this main.scss.

main.scss

.post-topic {
    margin: 0 4px;
}

That should just give us some nice space just so we can see it better.

OK that looks good now. That's about it for the post topics. Let's commit our code and hop into the next guide.

git status
git add .
git commit -m "added post topics to post component`

Let's see what we have to do now. I'm going to check the design. I believe it's on invision. this might be a different design. We have our recent posts rendering, so we basically have all the functionality for this.

All we need to do now is make it so when we search in here and hit enter, we actually render all this. We have ours go to the results page.

What we need to do now is basically adding in the content, make the logo smaller and smaller on the logo component. In the next guide, we will hop into the rest of this stuff so I'll catch you then. We already committed our code so we get there. We'll see in the next guide.

Resources

Code at this stage