So we can get rid of this results H1 up here or whatever this is and then we're also going to modify it. The main bulk of this guide is to be modifying this logo component to take in a custom size so we can use it on multiple pages with different sizes.

So right now it's like 105 pixels. We want to make it so on this results page it's a bit smaller in our design here if I hit inspect and I head over to the results page it's about 50 pixels, we'll make it 55 pixels just to make it a little bigger. So let's go ahead and add in that functionality.

I'm going to head over to the app here and close out my css and let's go and close out our Post and our recent posts and let's open up our logo.js. So basically in here I want to make it so we can apply a custom size. We can do this with some inline styles pretty easily, and this is a really good appropriate use of inline styles in react.

So first thing I want to do is in render say constant size is equal to an object and then I want to say height and we want it by default to be 105 and then we want the width to be by default 105. So now in our image we can just say style is equal to in curly braces size.

logo.js

import React, { Component } from 'react';

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

export default Logo;

So I just want to kind of elaborate how this is working so normally when we do in line styles we don't pass in a constant we just pass in two pairs of curly braces and when we say something like color and then like blue. Now the reason we are only doing one set of brackets is because this already contains the other set of brackets up here.

Because we just pass in a normal javascript object usually. Now we're also doing that with this constant, so just wanted to clear that up. So if I save this, we're obviously going to get the same thing. So what I want to do in my main.scss is get rid of this default 105 width and height.

Let's cut out that image and let's just cut out the entire .logo-main style so we just have .post-topic here. Now I'm going to save this file and I'm going to exit out of that and we should have our styles still, so let's see what we want to do. So I'm going to go back to localhost:3000, we already know it's working because it's the same exact component but basically yeah 105.

If I'm to change this to something like 55 like what we want on results and I head to results, you'll see that we have the size we want.

So let's make it so by default it's 105. But then let's pass in a prop, let's have it accept a prop called size and then if it's set we'll just set it to that, otherwise we'll leave it at 105. So we can type this out by saying this.props.size ? this.props.size : 105,.

So basically what's happening here is we're saying OK let's see if this.props.size exists. If it does exist then let's return this.props.size, if it doesn't exist let's return 105. So basically we want the same thing to be on width. And if I go to our app it will still work because this.props.size doesn't need to exist, if it doesn't exist it's simply going to render 105.

So all we have to do is try and think about this and do it yourself try and pause the video and do it. But all we have to do is pass in a props called size with the size we want, and we only want to provide it with one variable, one size. Because according to the docs, the guidelines for this image, we can't stretch it, we can't make anything other than the same size width and height so we want it to be the same size.

We can easily do this now by going into our results and passing into our logo a prop called size and just saying in here 55 because we want it to be smaller on this page. So now if I go to localhost:3000 it's going to be the same because it doesn't exist, now if I type in results it's going to be small.

So I'm going to go through this one more time. If I go to my home.js we have the logo. So basically what's going on is it's rendering right. So it's going in here to our logo.js and it's saying OK let's check for the process size. Now back home we didn't pass in a size so it doesn't exist. So it's returning false so it's returning 105. So these are height and width 105 each.

Now let's go check our results, we have a logo, we're passing in a size of 55. Let's go to our logo component again and then saying okay does this.props.size exist? Yes it does. Let's return this process size and it's of course 55 so we're going to render 55, and 55 for the style, for the height width. So that's great and that works.

Now let's just get rid of this results h1 tag. Let's go to our results and where did we put this. I'm going to hit command + shift + f Visual Studio code and just type in results, this should pull it up. Looks like it's in our results.js and it's in this h1 tag so I'm just going to get rid of this.

I'm going to save it and I'm going to open our file map back up and head back to the app and you will see now that we just have our logo.

So now what we need to do is add in the search bar and then we need to add in some items. We need to add in something similar to recentPost.js except for we don't want to call it that. We'll just call it, how about resultsPost.js that will do that. I think that's what he called it the last app that I was building out.

So we'll call it resultsPost.js and then we will in there put some post components in here and I'll show you how we can render different content for this post component. So I'm going to head over to the app here and see what we got so let's just throw in our search bar real quick and then we'll end the guide.

So I'm gonna say search bar, it auto imported so make sure you import search bar from ./searchBar so we have access to that. I'm going to save this and I'm gonna see what we have, so we have our search bar it's the same exact thing we have on our main screen. But there's a couple problems here, and we don't want a lot of this functionality.

So let's commit our code and then let's get into the next guide where we will basically create our results component real quick our results post component and it will be basically have nothing in there, just some list tags, and then we'll fix up the search input here to do what we want.

So let's commit our code.

Terminal

git status 
git add .
git commit -m "modified Logo component to take in a custom size via props"
git push origin master

That should be it, I'll see you in the next guide where we will hop into that recent post component and then finish up our search bar we'll see you then.

Resources

Source code