So let me show you in Firefox with gridtools there you go. So we want to display the box in there.

Now we have a bunch of other components. We have the box, the archive, the content, and this plus button. So let's go ahead and start with this, then go to archive content, and then throw in the plus button afterwards.

So let's go to our newsletterGrid.js here, and let's get rid of this text and put some comments on. Let's say we need it and the add button for the top. We need a box. We need an archive component, and we need a content component.

So let's go ahead and let's start with the box. I mean get rid of that comment and I'm just going to type out:

newsletterGrid.js

<NewsletterBox date={new Date()}/>

When we hook it up and get it all functional we'll get this data from redux or from our server, we'll fetch it put in our state and grab it through there through the connect within our newsletter box or within the grid. Either way works.

Let's go ahead and actually create this component because we don't even have it, by going into newsletter, and creating a new file and saying newsletterBox.js. In here we want to import React and export a functional component. So let's go to newsletterBox.js here, and say:

newsletterBox.js

import React form 'react';

export default function NewsletterBox(props) {
    return (
        <div className='newsletter-box'>
            <div>02</div>
            <div>Jan 2018</div>
        </div>
    )
}

So let's give these each a class name after we look at it in the browser. You'll see this says: newsletterBox undefined. That's because we're not importing it.

So let's make sure we're importing this into our newsletterGrid by going in here and just saying:

Now we want to give these divs each a className, so we can make a grid of our own within that box and then we'd also like to get these values from the date object we're passing in as a prop not just manually hard-coded in there as text.

So let's give these className:

newsletterBox.js

import React form 'react';

export default function NewsletterBox(props) {
    return (
        <div className='newsletter-box'>
            <div className='newsletter-box__day'>02</div>
            <div className='newsletter-box__month-year'>Jan 2018</div>
        </div>
    )
}

So what we want to do now is just get these values from the current date. So in today's instance, it's the 12th for me. So this number is going to appear as 12 for me. It will appear as whatever number it is on the day you are taking its video. So if it's July 4th. It's going to display 4 right here, and it will say July 2018 or whatever year you're in right now. So that's a nice date. I like that date. So let's go ahead and say:

newsletterBox.js

import React form 'react';

export default function NewsletterBox(props) {
    return (
        <div className='newsletter-box'>
            <div className='newsletter-box__day'>{props.date.getDate()}</div>
            <div className='newsletter-box__month-year'>{props.date.getMonth()} {props.date.getYear()}</div>
        </div>
    )
}

Now let's look at our browser. It's not going to look correct 100 percent. I want to close out of my Heroku instance since I keep clicking on that, and you'll see indeed it's not correct. Now there's a couple things wrong with this. It's saying 5 even though it's June it's clearly not May for me. It's going to display a month behind for you, and the year is says 1 1 8. It's 2018 not 1 1 8.

So all we have to do is check the date object in Mozilla docs and I think they specifically say not to use getyear() even though they have it in there. So they say to use getFullYear(). Let's scroll down to getYear() and see what it says. It says Deprecated. Use the getFullYear() method instead

So let's say: {props.date.getFullYear()}, and then now it should display correctly. Now when we get to this we're going to have to learn how to basically get rid of the 20 in front of that to display only the year it is. It's really easy, but let's focus on this right now.

So there's a couple problems with this. One of them doesn't matter but it's something I want to point out because it will matter showing how we get the actual text in there once we do. The problem is that it displays a month behind.

If you go in here and say getMonth() it says: returns the month from 0 to 11. That's clearly a problem because January is not zero. So anyone using this application is going say: "hey, it's January not zero it's the first month just because the arrays start at zero". Still, it would make sense if they programmed it differently, but technically arrays start at zero.

So that's why they do it. See, they did it for date. Not sure why they didn't do it for everything else. They start date at 1, but then they just made this like an array on everything else. So let's see we can do this and then just add one and then he'd be the correct ones. So we can say:

newsletterBox.js

import React form 'react';

export default function NewsletterBox(props) {
    return (
        <div className='newsletter-box'>
            <div className='newsletter-box__day'>{props.date.getDate()}</div>
            <div className='newsletter-box__month-year'>{props.date.getMonth() + 1} {props.date.getYear()}</div>
        </div>
    )
}

It doesn't really matter because the way we're going to program it it's not going to really use the numbers. We want to get the dates. We want to get the actual we don't get the actual like text like June or July. So what we have to do is actually write a function that will take in a number and go through a switch statement and say hey if it's six display June, if it's one display January. So we have to write our own function.

Let's check the javascript date reference, and see if they don't already have one. Yeah, they don't have it. So we'll the writer own that will get us the actual month. Let's just make a google search and make sure there's not something already built for us.

Sometimes you get month date from the name from date. Let's see if something's already written. So I guess not, but this is a really clean approach anyway. So what you can do is just put these on an array, or a collection, and you can just get the index that you're getting back for month and explain the correct one.

So I'm not going to copy paste it, so that I can show you how to write it out. So let's go ahead and above this let's just say:

newsletterBox.js

import React form 'react';

const months = [
    'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'
]

export default function NewsletterBox(props) {
    return (
        <div className='newsletter-box'>
            <div className='newsletter-box__day'>{props.date.getDate()}</div>
            <div className='newsletter-box__month-year'>{props.date.getMonth() + 1} {props.date.getYear()}</div>
        </div>
    )
}

We could give it an extra item at the beginning here, but it's actually good that it starts to zero because we can just getmonth() and throw it into the array and since it started 0 will return January. So let's just say:

newsletterBox.js

import React form 'react';

const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']

export default function NewsletterBox(props) {
    return (
        <div className='newsletter-box'>
            <div className='newsletter-box__day'>{props.date.getDate()}</div>
            <div className='newsletter-box__month-year'>{months[props.date.getMonth()]} {props.date.getYear()}</div>
        </div>
    )
}

That will return us the correct one, so if it's January it's can return zero and it's going to go to our array, and say "hey, this is the zeroth month, return that". That should be working. That's going to return June for me, and probably like June and July for you depending on the month are going through this. Let's go into our application, log in, and you'll see it displays the correct date.

So that really makes our box completely functional because all we need to do now is map over the date that we pull from the server, and it will automatically calculate everything for us. So it's really nice that we built this already.

Before we commit our code and move on, I want to show you a way we can reduce the amount of code we have in here. It's not a ton of code, but it is a bit less and it's more efficient. Instead of saying props here we can just wrap it with braces, and delete props and say date.

That will pull it out very similar to how we pull component out of react like this. Pretty much the same. Exactly. OK. So now we can just say date instead of props. That makes it pretty clean.

newsletterBox.js

import React form 'react';

const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']

export default function NewsletterBox({date}) {
    return (
        <div className='newsletter-box'>
            <div className='newsletter-box__day'>{date.getDate()}</div>
            <div className='newsletter-box__month-year'>{months[date.getMonth()]} {date.getYear()}</div>
        </div>
    )
}

So let's commit our code, and then let's go into the next video. So let's say git status, git add ., git commit -m "built newsletterbox and functionality". See you in the next video.

Resources

• Source Code