Looks like it's being a little bit covered by signin form, but those are the two items okay. What we want to do is just for testing purposes is fill that with a little bit of data so we can map over it okay. So let's say in navbar let's say this.props. and then we'll call it or we've already called it navbarLinks right.

So this right here navbarLinks.map and then we want to say link and then we'll say return and we will return an a tag with a key of index so let's add in our index. And then we're going to have an onClick, but we don't really want to provide it, well we'll provide it here, it's just that we can't do anything with it until we put the data in the right place.

So we'll say onClick is equal to, here's the thing. It's going to have to be another action so we can tell which ones the active tab. So what we need to do, for now, is just say arrow function console.log trying to switch tab, okay.

Now what we need to do before the key is put a class name and make that equal to navbar__link. Okay, now what we need to do is just put the link.title in here okay. So now what we need to do is provide these links because right now we don't have it. So first thing we need to do is connect it with redux, so lets say import connect from react redux, then let's say navbar is equal to connect and then we'll say mapStateToProps and then we'll pass in no actions yet, and then we we'll say Navbar.

navbar.js

import React, { Component } from 'react';

class Navbar extends Component {
    render() {
        return (
            <div className='navbar'>
                {
                    this.props.navbarLinks.map((link, index) => {
                        return (
                            <a className='navbar__link' key={index} onClick={() => console.log('trying to switch tab')}>
                                {link.title}
                            </a>
                        )
                    })
                }
            </div>
        )
    }
}

Navbar = connect(mapStateToProps)(Navbar);

export default Navbar;

Okay so let's type in our function mapStateToProps pass in state and then we're just going to return state.headernavbar.navbarlinks, okay so let's just verify that that's correct. We can't see yet, let's do this state.headernavbar,

navbar.js

function mapStateToProps(state) {
    return {
        navbarLinks
    }
}

Navbar = connect(mapStateToProps)(Navbar);

export default Navbar;

we've got headerNavbar and then we've got navbarLinks.

Now we might need to capitalize this because we called it Headernavbar in here, in the index.js okay so let's just rename this to lower case header and then Navbar with a capital N in our index.js in our reducers.

index.js

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form'; 

import headerNavbar from './headernavbarReducer';

const rootReducer = combineReducers({
  form,
  headerNavbar
});

export default rootReducer;

Right, now we need to say in our navbar.js that we're accessing headerNavbar like so, and then we're taking navbarLinks out of it and returning it, so we have access to it in our props. Alright, that should be good except for we don't have anything in here, so let's go see what happens when we go to our app. It looks like it crashes probably because it's trying to map over there, but there's no items.

I typed in neaderNavbar, so I want to type in headerNavbar. I typed that in the index.js, there we go. Okay so we don't have anything so nothing's happening so let's go ahead and put some data in there so it will actually map over it. So we've got our navbar.js it's trying to map over it but it can't. So let's go into our hedernavbarReducer and give it some default navbarLinks.

Okay so we've got a couple items here

headernavbarReducer.js

const INITIAL_STATE = {
    headerLinks: [],
    navbarLinks: [
        {
            title: 'account'
        },
        {
            title: 'purchases'
        }
    ]
}

So we're going to get rid of this data in a second but I just want to show you that it's working, okay so you'll see account and purchases up at the top here.

So what we need to do is we need to basically make it so we can create actions to change this data. Before we do that let's just make sure this is working for the header as well, and not just the navbar. So let's go into our code and let's copy this navbarLinks and let's replace headerLinks with navbarLinks, and then replace navbar with header so it still says headerLinks, I just wanted that data.

headernavbarReducer.js

const INITIAL_STATE = {
    headerLinks: [
        {
            title: 'yooo'
        },
        {
            title: 'YOOO'
        }
    ],
    navbarLinks: [
        {
            title: 'account'
        },
        {
            title: 'purchases'
        }
    ]
}

I did caps just to separate it a little more. Put a comma here after the headerLinks closing bracket and we're good to go. Okay, now go back to the app, nothing's going to happen because we're not using that data anywhere. Okay so let's go back to our code and let me show you how this works.

In navbar if we were to change this to header links and then make sure we change it down here as well in mapStateToProps, it's going to take out the header links now.

navbar.js

function mapStateToProps(state) {
    const{ headerLinks } = state.headerNavbar;
    return {
        headerLinks
    }
}

Okay, so it's going to show the header links up here, see how it says yooo YOOO.

Right, we've gotta change that back, but I was just showing you that that's how it worked. Okay so we need to do is we need to copy all this function, all of the stuff right here and go into our header.js and go to the bottom here and paste it and then obviously we want to rename everything down here to header not navbar and then we want headerLinks not navbarLinks.

header.js

import React, { Component } from 'react';

import { connect } from 'react-redux';

class Header extends Component {
    render() {
        return (
            <div>
                <img src='http://via.placeholder.com/50x50'/>
            </div>
        )
    }
}

function mapStateToProps(state) {
    const{ headerLinks } = state.headerNavbar;
    return {
        headerLinks
    }
}

Header = connect(mapStateToProps)(Header);

export default Header;

and then we're going to need to connect. So let's say for it to connect react redux and then what we need to do is we need to map over these items okay. So let's go into navbar.js and let's copy this right here and then let's go back into header.js and then what we need to do is provide another div. We don't want to do it straight in here because we have the image. Okay, we want to put another div in here and we'll say className is headerLinks and then we'll paste that in there. Okay so now we're having it go over the navbarLinks but we want it to go over the headerLinks, same thing doing the same thing, we want to name his header in the className and we're good to go.

header.js

class Header extends Component {
    render () {    
        <div className='header'>
            <img src='http://via.placeholder.com/50x50'/>
            <div className='header__links'>
            {
                this.props.headerLinks.map((link, index) => {
                    return (
                        <a className='header__link' key={index} onClick={() => console.log('trying to switch tab')}>
                            {link.title}
                        </a>
                    )
                })
            }
            </div>
        </div>
    }
} 

Okay so that looks good, let's go ahead and go back to our application and see what it looks like. Okay, it looks like you can't see anything from what I see, I'm just going to hit command + f and type in yooo. You'll see it says it's twice there which means it's somewhere on the screen, it's just not rendering in the right place but we know it's there because we're searching for it and it says 2/2 so we know it's there.

It's just not showing up for some reason. So let's inspect the element and let's go to the header, so let's go to layout, we've got our signin and all that junk, we've got our header. So you'll see in header we have headerLinks, looks like they are right below our image so we are bleeding over, so there underneath this navbar.

So what we need to do is we need to make it so these appear over here on the right. So what we'll do in the next video is we will style all of these links, we'll style everything and then we'll hop into the actions.

So let's go ahead and commit our code.

Terminal

git status
git add .
git commit -m "connected header and navbar components to redux store to get links"

I'll see you in the next video.

Resources

Source code