So let's go ahead and build out the structure of our component. Let's put in the JSX and then apply the styles. It's going to take a few guides for us to get this all put in for our request items, especially with having a drop down. But we're going to try and get as much as we can done right now.

OK so let's go into our requestsItem.js and let's put in our icon, and we can build an icon component really quick.

requestsItem.js

import React, { Component } from 'react';

function Icon({icon}) {
    return (
        <i className={icon}></i>
    )
}

class RequestsItem extends Component {

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

export default RequestsItem;

Let's try this out and see what we get.

As you can see, we now have this icon right here. So it's a really easy icon component. Let's go throw it into its own its own file and we want it to be in the main directory so components. Let's just say icon.js and let's go back to request item and throw icon in there.

icon.js

import React from 'react';

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

Now in requestsItem.js.

requestsItem.js

import React, { Component } from 'react';

import Icon from '../icon';

class RequestsItem extends Component {

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

export default RequestsItem;

Let's go to the browser and it still looks like we our icon's there. So that's how you build an icon component. Let's move on to the next video just because that was kind of its own separate concept. Let's commit our code and this way we can write a meaningful and kind of straightforward commit message for once.

git status
git add .
git commit -m "built an functional react icon component utilizing font awesome icons"

I'll see you in the next video.

Resources

Code at this stage