So let's go ahead and go to requests.js. We want to get rid of these items. We want to develop a request item component. So very similar to what we're doing in boxes, we have requestsBoxes.js and then requestBox.js. We want the same idea for our requests.

So let's create a new file called requestsItem.js and what we want to do is copy the basic component layout so we don't have to type it out again, then we'll take out what we don't need.

requestsItem.js

import React, { Component } from 'react';

class RequestsItem extends Component {

    render() {
        return (
            <div className='requests-item'>
                item goes here
            </div>
        )
    }
}

export default RequestsItem;

Now let's create a CSS file for this called requests-item.scss and let's give a basic color style just to see if it's working.

requests-item.scss

.requests-item {
    color: blue;
}

Now we need to import this into our main.scss.

Now we'll use our requestsItem in our requests.js and see what it looks like.

requests.js

import React, { Component } from 'react';

import RequestsItem from './requestsItem';

class Requests extends Component {
    render() {
        return (
            <div className='requests'>
                <RequestsItem/>
                <RequestsItem/>
                <RequestsItem/>
            </div>
        )
    }
}

export default Requests;

Let's open up our browser and see.

You'll see our requests and all the items are blue. We have the structure now, so let's go remove the color blue because we know it's working, and let's remove the moccasin background. Who knew there would be a color called moccasin.

So first thing we want to do structure this on our CSS grid. So we already have requests in there. We need to build a grid in requests for our requests items. Now the grid is going to be very simple because it's literally just a few items, so very similar to what we did with boxes just a grid with a gap. Let's look at our design.

As you can see, it's just a basic grid. So let's go in to requests.scss and do basically the same thing.

requests.scss

.requests {
    grid-row: s/e;
    grid-column: requests-s/requests-e;

    display: grid;
    grid-row-gap: 2rem;
}

Now let's go back to our app and see.

And we have our items here. Now we don't want these items to be so tall, so what we need to do is basically give each item a height and structure the JSK within them to contain all these items here. Let's go ahead and commit our code and build out the CSS and JSX for this in the next video.

git status
git add .
git commit -m "built requests item component base and applied a grid to requests component"

Resources

Code at this stage