How to pass a icon and text to a button in React?

Question

I have to pass an icon and text to a button, and this button is in a component, and that component name is ReusableButton in my project. My problem is I have two more buttons with same button style, but the icon and text are different. So If I know how to pass an icon and text to a button, then I can resume that button component. I will share my code so please go through it once. Still, if I am not clear with my doubt please put comment

This is App.js

import React from 'react';
import './App.css';
import Navbar from './Navbar/Navbar'
import Button from './Button/Button'

function App() {
  return (
    <div className="App">
      <Navbar></Navbar>
      <Button></Button>
    </div>
  );
}

export default App;

This is App.css

I didn't apply any css in App.css

This is Navbar.js

import React, { Component } from 'react';
import './Navbar.css';


class Navbar extends Component {
    render() {
        return (
            <div className='container-fluid'>
                <div className='row'>
                    <div className='col-6'>
                        <nav className="logoclass navbar navbar-expand-lg navbar-light">
                            <a className='hyperlinkStyle' href='www.facebook.com'>
                                <img className='logoStyle' src='assets/images/logo.png' alt='logo'></img>
                            </a>
                            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                <span className="navbar-toggler-icon"></span>
                            </button>
                        </nav>
                    </div>
                </div>
            </div>
        );
    }
}

export default Navbar

This is Navbar.css

/* logoStyle css starts here */
.logoStyle {
    width:103px;
    margin-top: -4%;
    margin-left: 88%;
}
/* logoStyle css ends here */

/* this css used to remove dots in li of ul, starts here */
li {
    list-style-type: none;
}
/* ends here */

/* helpStyle css starts here */
.helpStyle {
    color: #00b2d6;
    cursor: pointer;
    font-size: .75rem;
    font-family: 'Roboto', sans-serif;
}
/* helpStyle css ends here */

.lione {
    display: inline-block;
}

.litwo {
    display: inline-block;
}

.lithree {
    display: inline-block;
}

.border {
    background-color: transparent;
    border-radius: 1%;
}

.english {
    color: #524c61;
    font-size: .75rem;
    font-family: 'Roboto', sans-serif;
    font-size: .75rem;
}

.flagStyle {
    height:.75rem;
    margin-left: .5em;
    margin-right: .25em;
    margin-top:-2.5%;
}

.rupeeStyle {
    margin-left: .5em;
    color: #b2aebd;
    font-size: .75rem;
}

.buttonStyle {
    background-color: transparent;
}

This is Button.js

import React, { Component } from 'react';
import './Button.css'
import ReusableButton from '../ReusableButton/ReusableButton';

class Button extends Component {
    render() {
        return(
            <div className='container'>
                <div className='row'>
                    <div className='col-12'>
                        <ReusableButton></ReusableButton>
                    </div>
                </div>
            </div>
        )
    }
}


export default Button

This is Button.css

I didn't apply any css in Button.css

I created this component to reuse, This is ReusableButton.js

import React, { Component } from 'react'
import './ReusableButton.css';


class ReusableButton extends Component {
   render() {
       return(
           <div className='button'>
               <button type='button' class='btn-primary buttonStyle'>Click here</button>
           </div>
       )
   }
}

export default ReusableButton

This is ReusableButton.css

.buttonStyle {
    border: none;
}

My Goal is to pass Icon and text to a button.

Answer 1

You can simply use props for this. In your Button.js, pass the text you want to put in your reusable button like this

<ReusableButton btnText="yourText"></ReusableButton>

Then suppose your icons are images (not bootstrap glyphicons), you import all of them first and create a switch condition that will render the right icon according to your passed text.

import React, { Component } from 'react';
import './ReusableButton.css';
//import your icons here
import Icon1 from './dir/icon1.png';
import Icon2 from './dir/icon2.png';
import Icon3 from './dir/icon3.png';

class ReusableButton extends Component {

   //this function will identify what icon to render
   renderIcon = () => {
     switch(this.props.btnText) {
       case 'yourText1': return <Icon1 />;
       case 'yourText2': return <Icon2 />;
       case 'yourText3': return <Icon3 />;
     }
   }

   render() {
       return(
           <div className='button'>
               <button type='button' class='btn-primary buttonStyle'>
                  {this.renderIcon} {this.props.btnText}
               </button>
           </div>
       )
   }
}

export default ReusableButton;

---

ANOTHER APPROACH

Another way is pass the icon and text from the parent Button component as children like this

//import your icons at Button.js
import Icon1 from './dir/icon1.png';
import Icon2 from './dir/icon2.png';
import Icon3 from './dir/icon3.png';

Then pass it as children to your reusable button like this

<ReusableButton><Icon1 /> YourText1 </ReusableButton>
<ReusableButton><Icon2 /> YourText2 </ReusableButton>
<ReusableButton><Icon3 /> YourText3 </ReusableButton>

Then in your ReusableButton.js Use it like this

render() {
       return(
           <div className='button'>
               <button type='button' class='btn-primary buttonStyle'>
                  {this.props.children}
               </button>
           </div>
       )
   }