score:6

Accepted answer

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>
       )
   }

Related Query

More Query from same tag