So we've done this before in our newsletter box, and we're going to do it in our archive items now. In the newsletterArchive.js instead of passing in a hardcoded string, let's pass in a new Date object.

newsletterArchive.js

class NewsletterArchive extends Component {
    render() {
        return (
            <div className='newsletter-archive'>
                <div className='newsletter-archive__title'>Archive</div>
                <div className='newsletter-archive__items archive-items'>
                    {/* newsletter items */}
                    <ArchiveItem title='hey' date={new Date()}/>
                    <ArchiveItem title='hey' date={new Date()}/>
                    <ArchiveItem title='hey' date={new Date()}/>
                    <ArchiveItem title='hey' date={new Date()}/>
                </div>
            </div>
        )
    }
}

So let's go ahead check our console because we should be getting an error. And we are. OK. It says objects are not valid as a react child. So we don't want to render a div, we want to parse it and display the date. so we going use that in our archive item at the top of our file here.

newsletterArchive.js

function ArchiveItem({title, date}) {
    return (
        <div className='archive-item archive-items__item'>  
            <div className='archive-item__title'>{title}</div>
            <div className='archive-item__date'>
                { date.getMonth() }
                { date.getDate() }
                { date.getFullYear() }
            </div>
        </div>
    )
}

Now this is going to introduce some problems, but let's go into our application and you'll see it says just a bunch of numbers.

Now if you look closely it kind of makes sense. You got 5 and you got 12 and then you got 2018. So let's go separate them with a slash like we have in our design and that's pretty easy all we have to do is put a slash in between them.

newsletterArchive.js

function ArchiveItem({title, date}) {
    return (
        <div className='archive-item archive-items__item'>  
            <div className='archive-item__title'>{title}</div>
            <div className='archive-item__date'>
                { date.getMonth() }
                /
                { date.getDate() }
                /
                { date.getFullYear() }
            </div>
        </div>
    )
}

Now let's go back and you'll see it looks like the design ok cool. That looks great except for we don't want it to display the whole entire year because in the design it only displays the last two digits of the year. So that's pretty simple to fix. All we have to do is say give for a year and then say minus 2000.

newsletterArchive.js

function ArchiveItem({title, date}) {
    return (
        <div className='archive-item archive-items__item'>  
            <div className='archive-item__title'>{title}</div>
            <div className='archive-item__date'>
                { date.getMonth() }
                /
                { date.getDate() }
                /
                { date.getFullYear() - 2000 }
            </div>
        </div>
    )
}

Now I'm not concerned about the year 3000 because that's in a hot minute. We just need to do minus 2000 because no one's going to be using the app in the year 3000. there's one more thing I want to do and that's fix the month. You'll see it is a month behind if you're in January, it would say zero. So let's go ahead and fix this by just adding one to our month was a month.

newsletterArchive.js

function ArchiveItem({title, date}) {
    return (
        <div className='archive-item archive-items__item'>  
            <div className='archive-item__title'>{title}</div>
            <div className='archive-item__date'>
                { date.getMonth() + 1 }
                /
                { date.getDate() }
                /
                { date.getFullYear() - 2000 }
            </div>
        </div>
    )
}

Now by doing that it works. That should be it. That's all you have to do to parse it. That's all we have to do now. Obviously when you click on that it should take you to the article screen. But that's a whole different screen.

So what we'll do is put that aside and we'll build our main content component. And then once we're done with the content component we'll build out the little edit thing for the content on it. But once we're done with that we will put in the plus button and then once we've done that we'll come back build the article component and the new item component.

The component for creating a new newsletter is very similar to the component for editing a newsletter. So we only really have to create this component once and we can use it in a whole bunch of different places.

But anyway that's way off track right now where we need to worry right now is just getting this. So let's go ahead and commit our code and then in the next video we'll build the component.

git status
git add .
git commit -m "parsed date for archive item component"
git push origin master

I'm not pushing to Heroku again because we're using a local host services set actions like signing in or not going to work at all. Okay. And then you won't even be able to navigate to dashboard because authenticated will be never set to true. But we'll deal with that later.

See you in the next video.

Resources

Code at this stage