JSX for Requests Item

Let's open up requestsItem.js and let's work on getting things set up in here.

requestsItem.js

import React, { Component } from 'react';

import Icon from '../icon';

class RequestsItem extends Component {

    render() {
        return (
            <div className='requests-item'>
                <Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
            </div>
        )
    }
}

export default RequestsItem;

Now, I want to reconfigure our icon component to be able to take in a className that we pass into it. So let's go into icon.Js and add that in.

icon.js

import React from 'react';

export default function Icon({className, icon}) {
    return (
        <div className={className}>
            <i className={icon}></i>
        </div>
    )
}

Sweet, now we can just pass in a className for our icons when we implement them. Now let's go ahead and put in the title. So we need a title and let's look at our design.

large

We need a title and we need a subtitle for the name and unit. So let's put those in.

requestsItem.js

import React, { Component } from 'react';

import Icon from '../icon';

class RequestsItem extends Component {

    render() {
        return (
            <div className='requests-item'>
                <Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
                <div className='requests-item__title'> 
                    Yo my door fell down
                </div>
                <div className='requests-item__tenant-unit'>
                    Max - Unit 115
                </div>
            </div>
        )
    }
}

export default RequestsItem;

Now after those, we have the arrow, which we're going to use a Font Awesome icon for. We also have a date and a button, so let's put those in.

requestsItem.js

import React, { Component } from 'react';

import Icon from '../icon';

class RequestsItem extends Component {

    render() {
        return (
            <div className='requests-item'>
                <Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
                <div className='requests-item__title'> 
                    Yo my door fell down
                </div>
                <div className='requests-item__tenant-unit'>
                    Max - Unit 115
                </div>
                <Icon className='requests-item__arrow' icon='fas fa-sort-down'/>
                <div className='requests-item__date'>
                    09/15/97
                </div>

            </div>
        )
    }
}

export default RequestsItem;

So you'll see that we're using date quite often so we should build a component for this, but let's do that later. Once we get it all laid out we'll build the component for it. Okay, the next thing we need is a button that we're going to hide. And since we have a component for this, let's import Button.

requestsItem.js

import React, { Component } from 'react';

import Icon from '../icon';
import Button from '../button';

class RequestsItem extends Component {

    render() {
        return (
            <div className='requests-item'>
                <Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
                <div className='requests-item__title'> 
                    Yo my door fell down
                </div>
                <div className='requests-item__tenant-unit'>
                    Max - Unit 115
                </div>
                <Icon className='requests-item__arrow' icon='fas fa-sort-down'/>
                <div className='requests-item__date'>
                    09/15/97
                </div>
                <Button className='requests-icon__move' icon='fas fa-wrench' callback={() => console.log('tryna change request status.')}/>
            </div>
        )
    }
}

export default RequestsItem;

The button's purpose is moving our requests from pending to in-progress, etc. We'll be building this later, but for now we have it printing to the console.

Let's go in our application and see what happens.

large

OK sweet we have all of our data in here, but now we need to throw it on a grid. So let's go ahead and build that grid in the next video and throw our items on it. Let's commit our code.

git status
git add .
git commit -m "JSX for request item"

Resources

Code at this stage