Creating a Button Component in React JS

Let's start by going into our newsletterLatest.js component and here we want to place a button at the top, for the right side of the image.

newsletterLatest.js

import React, { Component } from 'react';

function Button({className, callback, text, icon}) {
    if(icon) {
        return (

        )
    } 
}

class NewsletterLatest extends Component {

    render() {
        const { title, imageUrl, body } = this.props;
        return (
            <div className='newsletter-latest'>
                <h1 className='newsletter-latest__title'>{title}</h1>
                <img className='newsletter-latest__image' src={imageUrl}/>
                {/* button */}
                <div className='newsletter-latest__body'>
                    <p>{body}</p>
                </div>
            </div>
        )
    }
}

export default NewsletterLatest;

So let's start with the icon because on the design we're trying to get a pencil in there. Okay. Now we've done this before. We've added in front of them before. So let's go ahead and go to fontawesome.com

We've done this before so it should be pretty easy specially because it's only one line to add it in. Let's go to get started and we want to copy the link (link below). Copy it and go back to your code and let's go to index.html and we'll paste it in right below our fonts.

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,700|Encode+Sans:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <title>Property Management</title>
</head>

<body>
  <div class="app-wrapper"></div>
</body>

</html>

Now what we need to do is basically return the icon we want, and the icon is going to be text. That's what's going to contain our Font Awesome. So let's put in an 'a' tag for our button.

newsletterLatest.js

function Button({className, callback, text, icon}) {
    if(icon) {
        return (
            <a onClick={callback} className={`${classname} button`}>
                <i className={icon}></i>
            </a>
        )
    } 
}

OK so let's test this out by going into our newsletter latest component below, underneath our image. We also need to pass in a method for it to call when clicked on.

newsletterLatest.js

class NewsletterLatest extends Component {

    handleEdit = () => {
        console.log('trying to handle edit');
    }

    render() {
        const { title, imageUrl, body } = this.props;
        return (
            <div className='newsletter-latest'>
                <h1 className='newsletter-latest__title'>{title}</h1>
                <img className='newsletter-latest__image' src={imageUrl}/>
                <Button callback={() => this.handleEdit()}/> 
                <div className='newsletter-latest__body'>
                    <p>{body}</p>
                </div>
            </div>
        )
    }
}

Now in here we want to pass in the rest of our props. So let's give it an icon. We want to put the pencil icon in so let's go back to fontawesome.com and if you go to icons, you can see we have all these icons. Let's search for pencil and you'll see we have pencil and pencil square. You can use whichever one you want. So here's the one I'm going to use.

Let's copy that string and paste it into our button and add a className.

newsletterLatest.js

class NewsletterLatest extends Component {

    handleEdit = () => {
        console.log('trying to handle edit');
    }

    render() {
        const { title, imageUrl, body } = this.props;
        return (
            <div className='newsletter-latest'>
                <h1 className='newsletter-latest__title'>{title}</h1>
                <img className='newsletter-latest__image' src={imageUrl}/>
                <Button className='newsletter-latest__button' callback={() => this.handleEdit()} icon='fas fa-pencil-alt'/> 
                <div className='newsletter-latest__body'>
                    <p>{body}</p>
                </div>
            </div>
        )
    }
}

Let's go and see where it exists in our application now and then put it on the grid.

You can see that in the bottom left we have our icon. And if you inspect the element and then click on it you should be able to see a console log that says "trying to handle edit".

So that's how that works. Let's go ahead and really quickly add it to our newsletter-latest.scss

newsletter-latest.scss

    &__button {
        grid-row: s/m;
        grid-column: s/e;
        justify-self: end;
        align-self: end;
    }

Now when we look at our browser and we can see that it's there. Cool. So that's basically all. Let's go ahead and finish up the button component in the next video.

Let's commit our code.

git status
git add .
git commit -m "built a button component"

I'll see you in the next video.

Resources

Code at this stage

Font Awesome