Let's go to our code. Let's go to our newsletter directory here and create a new file called newsletterArchive.js. Let's go to the box component and let's copy everything and throw it into the archive. Let's get rid of the months and let's get rid of the box and say archive. Let's change the className to newsletter-archive. Let's get rid of everything in here. And we'll get to the props here are set.

newsletterArchive.js

import React from 'react';

export default function NewsletterArchive() {
    return (
        <div className='newsletter-archive'>

        </div>
    )
}

OK. So what we want to do is basically throw in the JSX to structure this, then let's look at our design. We have a title and a bunch of items. So pretty simple stuff. All we need to do is add a div and some parameters.

newsletterArchive.js

import React from 'react';

export default function NewsletterArchive({title}) {
    return (
        <div className='newsletter-archive'>
            <div className='newsletter-archive__title'>{title}</div>
        </div>
    )
}

Now we're going to have to write another component to get in the items that are OK so let's look at our design again you'll see all these items.

So instead of just trying to put them all in here individually what we'll do is we'll write a component and make it super easy for us to fetch data and basically just throw them in there. So let's put a div and then add a comment.

newsletterArchive.js

import React from 'react';

export default function NewsletterArchive({title}) {
    return (
        <div className='newsletter-archive'>
            <div className='newsletter-archive__title'>{title}</div>
            <div className='newsletter-archive__items'>
                {/* newsletter items */}
            </div>
        </div>
    )
}

So what we wanna do is create a component called archive item. So let's go ahead and let's just write it in here since it has to do with archives. I will move it into a different file eventually.

newsletterArchive.js

import React from 'react';

function ArchiveItem() {
    return (
        <div className='archive-item'>

        </div>
    )
}

export default function NewsletterArchive({title}) {
    return (
        <div className='newsletter-archive'>
            <div className='newsletter-archive__title'>{title}</div>
            <div className='newsletter-archive__items'>
                {/* newsletter items */}
            </div>
        </div>
    )
}

Now we have archive item component and basically we just want to accept these as props because the ideal situation here is to use redux to get these items and then throw in the archive component.

So what we want to do instead of making this a function component is actually making it a class component because we're going to have to make it more complex. So let's just take this entire return statement here and then once get rid of this let's write it out as a class.

newsletterArchive.js

import React from 'react';

function ArchiveItem() {
    return (
        <div className='archive-item'>

        </div>
    )
}

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

}


export default NewsletterArchive;

Now, we want to import Component so this will work. So at the top we'll change line one to say: import React, { Component } from 'react';

Now we'll throw that JSX in our archive items right now. Let's look at the design, and it requires just the title and a date. Let's set up some divs.

newsletterArchive.js

function ArchiveItem(title, date) {
    return (
        <div className='archive-item'>
            <div className='archive-item__title'>{title}</div>
            <div className='archive-item__items'>{date}</div>
        </div>
    )
}

So now we have the structure. Let's throw it into our grid and let's render one of these archive items.

newsletterArchive.js

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

We're going to put a date object in there eventually, but I want to finally put this on the grid. Let's switch over to newsletterGrid.js and we'll import our component file and call it down below.

newsletterGrid.js

import React, { Component } from 'react';

import NewsletterBox from './newsletterBox';
import NewsletterArchive from './newsletterArchive';

class NewsletterGrid extends Component {
    render() {
        return (
            <div className='newsletter-grid'>
                {/* add button */}
                <NewsletterBox date={new Date()}/>
                <NewsletterArchive/>
                {/* content */}
            </div>
        )
    }
}

export default NewsletterGrid;

Great. Let's see what this looks like in our browser. We have an error that says title is not defined. It's saying "where is title for the archive component itself, not the archive item. All we need to do is change it from title to Archive since we don't need to do props because this component will only have one title.

Let's go to our browser. We can see that we have one item in there and we are archived. So let's minimize that and go into Firefox and look at it. So that looks good.

So basically what we want to do since we declared fractional units it's not showing up the grid until we put something on there. So we need to do is put the archive below the box.

So let's go into our code and us take the newsletter archive and make a file in our styles folder named newsletter-archive.scss and go import this in the main.scss.

Now lets go put it on the grid. Let's also check out our newsletter-grid.scss to see how we layed-out the columns. We also made a mistake and forgot to ad in archive-e to one of the columns. so let's fix that.

newsletter-grid.scss

.newsletter-grid {
    grid-row: content-s/content-e;
    // height: 100%;
    display: grid;
    grid-template-rows: [s box-s] 16rem [box-e archive-s] 1fr [archive-e e];
    grid-template-columns: [box-s archive-s] 16rem [box-e archive-e newsletter-s] 1fr [newsletter-e];
}

Now let's add those styles to our archive.

newsletter-archive.scss

.newsletter-archive {
    grid-row: archive-s/archive-e;
    grid-column: archive-s/archive-e;
}

Now that should be good. Let's go to the browser and see what's going down, and it looks like everything is where it belongs.

So what we need to do is end the video here and then in the next video we will style the title and further style the archive item and then once we get the styles, we'll throw in an actual date object and get that displaying correctly.

So let's commit our code.

git status
git add .
git commit -m "built archive and archive item components and placed on grid"

Resources

Code at this stage