All right so that's what we want to do in this video, we want to make it so that it can be different. Okay, it says Welcome, Jordan right, we want to change that so it says welcome and then the user name.

Okay, so let's go ahead and let's do that by going into our application and closing out all these nasty files, closing out this terminal and opening up header.js Okay, what we're going to want to do in here is basically take these in as props. So let's cut this out and we'll say title, then we'll go up here and say constant title, subtitle is equal to this.props.

Now what we're gonna have to do is go into where we're using this which is in layout.js and we're going to have to provide these, so the header is going to need a title of welcome and then we're going to need a subtitle that says, Please login to continue,I believe thats what it says.

Okay, let's get rid of that and let's say subtitle, so I'm back in header.js, I just changed it to say subtitle, so again it's getting it from props.

header.js

import React from 'react';

export function Header() {
    const { title, subtitle } = this.props;
    return (
        <div className='header'>
            <h1 className='header__title'>{title}</h1>
            <p className='header__subtitle'>{subtitle}</p>
        </div>
    )
}

export function HeaderBar() {
    return (
        <div className='bar'></div>
    )
}

Okay now that should be working, let's go check it out. Okay, it doesn't work, we'll go into header.js and it's because this is a function, so what we need to do is pass the props in, or were not connected to redux so we're going out to refactor this anyway, so let's change it from a function to a class.

So I just got rid of that. Now what I'm going to do is I'm going to basically cut this but I'm going to keep it okay, and I'm going to say class Header extends Component, well truth is we can keep it as a function, let's keep it as a function and we'll do this okay, I didn't think about this until now.

We'll keep it as a function, we'll put these in here and then the way we'll get these in here is basically by using layout.js as the deliverer. We'll put the delivery we'll put redux mapStateToProps in here and then provide them through here okay.

So the idea is let's see if it's working, okay it's working. The idea of what we want to do is we want to basically create a set of actions or one action that's going to allow us to change the title and subtitle and whether or not we want the bar, okay.

And then in here we will say okay let's map over the current title and subtitle and the status of whether or not we want the bar, and then what we'll do in each file so two of them I believe, in dashboard and in home, will say on componentDidMount we'll set the title and whether or not we want the header bar, so it'll be pretty easy.

Let's go ahead and commit our code, and we'll do that in the next video.

Terminal

git status
git add .
git commit -m "provided props to header title subtitle"

And before we end this guide, let's just quickly set this file up to take in mapStateToProps because it will be a pretty simple setup and I want to get it out of the way. So lets say import { connect } from 'react-redux'; and then we'll say down here above the export, Layout = connect(mapStateToProps)(Layout);.

Okay, now let's go ahead and type out our mapStateToProps let's say function mapStateToProps takes in state and what we're going to do is we're just going to return state for now, because we still have to make the reducer and all that.

layout.js

function mapStateToProps(state) {
    return state;
}

We're going to modify this function though, but that way we can kind of get this out of the way and prevent another video. Okay so let's go and commit our code again.

Terminal

git status
git add .
git commit -m "hookedup layout to mapstatetoprops"

And I went really fast over this, just because you know how to do this at this point. Okay, if you are this far you should know how to do this. Okay, I'll see you in the next video.

Resources

Source code #1
Source code #2