So let's quickly put this component together. Let's go to our components create a new file call it resultsPosts.js and let's put in our basic react code. So import react component from react. Let's say class ResultsPosts extends Component, then in here we just want to say render and return and let's see what we want to put in here. So we could put in a div or we could put in a list, I think what we'll do is we will just put in an unordered list.

OK so let's go ahead and say ul for unordered list, class name is equal to results-posts let's see what we did in our recent posts. We used a div but we could change that to a ul later on. Let's do a ul in here and then let's put a div in here and let's call it className of results-posts__wrapper.

Than in here, we want to say div className is results-posts__posts. Okay now we will make a call to render our posts in this function here, so let's just export this real quick and then try and render it into our results.js component and see if it's working. So I'm going to put some text in here I'm just going to say RESULTS GO HERE. Now what I want to do is down here say explore default ResultsPosts.

Now what I want to do is not make this list actually, what I want to do is make this a div and this one and unordered list because they're going to go in here and it doesn't really matter because we're going to be putting in our posts component here anyway.

resultsPosts.js

import React, { Componet } from 'react';

class ResultsPosts extends Component {
    render() {
        return {
            <div className="results-posts">
                <div className="results=posts__wrapper">
                    <ul className="results-posts__posts">
                        RESULTS GO HERE
                    </ul>
                </div>
            </div>
        }
    }
}

export default ResultsPosts;

But let's go to our recentPosts.js component and look at this. OK, what we want to do is actually import it into our results.js so let's say under SearchBar, import ResultsPosts from './resultsPosts';. And let's throw it in here, so let's say ResultsPosts and close it off, go to our application in the browser and see if it's rendering. Okay results go here, and we should be good to go.

Let's go ahead and get some data in there. So we are fetching the PostsWithQuery, now we're now using mapStateToProps in here, we could if we wanted to pass the posts in like that. But what we'll do is kind of like what we did in home.js and not do that, and what we did in recentPosts.js and do that, and use mapStateToProps in here.

So let's see, it looks like in recent post we actually are saying on componentDidMount fetchRecentPosts but we don't need to do that in ours because the logic's a bit different, we're doing it on a search not on mount. So we don't need to worry about actions in ours, we just need to connect the mapsStateToProps.

So let's head over to our resultsPosts.js and let's get this in here. Let's say import { connect } from 'react-redux';. We don't need our actions, we just need mapStateToProps. So let's type down here, function mapStateToProps pass in state and then return the state.

Right now we're not going to have a post because we haven't set up our reducer for it. So let's just do this for now and we'll do that in the next guide, let's say return state and let's say connect mapStateToProps, no actions and ResultsPosts.

export default connect(mapStateToProps)(ResultsPosts);

Now we should be getting our data back but we aren't really going to be getting anything we want because our reducer isn't set up to actually handle the data from a result. So when we type in rails, we get our data back but if we go to redux dev tools and open them up you'll notice that, okay am I in the right app? Yeah, okay I guess it's fetching our posts already, did we actually set that up.

I'm going to go to your app and see if we set that up in our reducer. OK it might be doing this because I have the other app open,

yeah so if I click on dailysmarty, I think that's our app, posts is empty. So if I go to the home screen, then I go to redux it will fill us up with our recent posts but you'll see that our post is empty.

So let's go ahead and get our reducer working so we can actually handle that data because you'll notice in our posts reducer, all we're doing is setting recent post we don't have our set results posts in there yet. So let's commit our code and do that in the next guide.

Terminal

git status
git add .
git commit -m "put together resultsposts component"
git push origin master

I will see you in the next guide where we will set up the reducer for set posts where we will basically set up our results posts, I'll see you then.

Resources

Source code