Let's start by looking at our state.

As you can see, we have resultsPosts and we have recentPosts. We want to look into our recentPosts component, and we want to do the same thing thing as we have set up in this file for our resultsPosts.

Now you might have noticed that this is really similar and we could even put these components into the same file, which is something we might do but for now we're just going to do this to keep things simple make them in their own separate components.

Open up our resultsPosts.js and let's write out this mapStateToProps function with our pathway.

resultsPosts.js

function mapStateToProps(state) {
    return {
        posts: state.post.resultsPosts
    }
}

Let's go ahead and map these over. We'll need to build a function to do this.

resultsPosts.js

class ResultsPosts extends Component {

    renderPosts() {
        const posts = this.props.posts.map((post, index) => {
            return <Post key={index} {...post}/>
        })
        return posts;
    }

    render() {
        return (
            <div className="results-posts">
                <div className="results-posts__wrapper">
                    <ul className="results-posts__posts">
                        {this.renderPosts()}
                    </ul>
                </div>
            </div>
        )
    }
}

We also need to import our Post component, so add import Post from './post'; underneath our Connect import.

That should work. Let's go check this in our browser and see if it's operational. Let's search for Rails and hit return.

You can see we are given all of our data. We have our titles and then our associated topics, exactly how we are giving them in the recent page. Now one thing, the only way for us to go back to the homepage is by reloading the app, which gets rid of our search results from our state.

We need to make it so we can actually go back without having to reload the app. So let's fix that. We can just fix that by adding a link inside of our logo, so when we click on it we can head back there.

Since that's really quick and easy, we might as well just do it in this guide rather than making a whole other guide. It always takes more time to do that. Let's go ahead and just go over what we did and then do that.

We're rendering our posts with a key and we mapped over them so that they will display on the results screen. Now, let's just implement that button on my computer so that it just heads to the homepage. All we need to do is head over to our logo.js.

We just need to make it a link, let's import the links from the router, import { Link } from 'react-router-dom';

Now what you need to do is just put the link in.

logo.js

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class Logo extends Component {
    render() {
        const size = {
            height: this.props.size ? this.props.size : 105,
            width: this.props.size ? this.props.size : 105,
        }
        return (
            <div className="logo-main">
                <Link to="/">
                    <img style={size} alt="daily smarty ui image logo big" src="/assets/ds_circle_logo.png"/>
                </Link>
            </div>
        )
    }
}

export default Logo;

All right, that's all set up and it should take us to the homepage. Lets go and test this and see if it's working.

You can see that we were sent back to the homepage, but we still have our results inside of our state, and We haven't reloaded the application, so that's all good.

What we need to do now in the next guide is instead of rendering the same exact content in the same way, we need to make it so we can render different content, because in our design it wants us to render the title and then the links.

Plus we need it to render our associated topics above our titles. Now I think that what they want for the titles and links is to have it show when you hover over it. We're going to make it so when we hover on this it's going open instead of clicking.

Let's go ahead and do in the next guide, we will basically build out the structure for this component and the JSX for it. Let's commit our code.

git status
git add .
git commit -m "mapped state to props in results posts component and rendered each post with our post component, and implemented home link in logo component"
git push origin master

Remember that you never want to commit code and not explain half of what you did. If you made a mistake, make sure to ammend your commits.

I'll see you in the next guide, where we're going to basically refactor our post component out a little bit so that we can render specific components.

Resources

Code at this stage