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>
)
}
Source: stackoverflow.com
Related Query
- How to pass a icon and text to a button in React?
- How can I find and click a button that has no text using React Testing Library?
- How to change the background and text color within button using button onClick in React JS
- How to pass a variable with text and a link into a React element
- How to pass text box value to sibling component in react on button click
- How to show hidden icon and remove text when the button is clicked
- I have buttons and a textbook in my React App, How do I make the click of the button trigger text input?
- How to align horizontal icon and text in MUI
- React router and this.props.children - how to pass state to this.props.children
- How to change text Value upon Button press in React Native?
- Closing React Semantic UI modal with button and close icon
- How to change name and Icon of Action Column in Material-Table React
- React Native: Text and Icon inline
- How to remove Clear button on Autocomplete and show only text
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- How to implement search bar button and result components in react
- How to create button with text under icon by reactjs?
- How can I combine a React element and text inside a ternary?
- Drag and Drop in React.js. How to pass custom react component in setDragImage
- Material-ui picker: how to hide text field and open modal with button
- Material ui: How to change DatePicker text and calendar icon color?
- display text instead of icon on mouseover - React material ui button
- How to change Cursor Icon upon button click on React
- How can I pass CSS classes to React children and ensure they will override the child’s local class?
- How to center text in Facebook Login Button for React Native (Android)?
- How to hide a button when printing using react and styled components?
- How to access values from React Select and pass them to Formik values on Submit?
- How to activate a react route and pass data from the service worker?
- How to open a text file and read the contents from it on react native?
- How to focus a button in a details list using React and Office Fabric
More Query from same tag
- How to prevent history.push if location didn't change in react-router4?
- CSS How to fix 'Invalid property value'
- How to declare array as any: when using UseState hook?
- Redux set multiple states at once
- my form is not working. when i click on save button, my table is blank, without the field input.and my cancel button is not clearing the fields
- react-router throwing 404 upon page refresh with React app hosted on GoDaddy
- Replacing characters between strings with html tags in react
- Update div rendering after state change
- Path matches Route but the component for that route is not rendered
- How can I get the value of 2 series at the same time with React?
- socket.io-client and useEffect not getting updated react hook
- Is there a simpler way to write this React function?
- Set default value for select if `select` is inserted
- Nginx: serve multiple React applications on the same server
- Can I release what I import in a ES harmony style JavaScript?
- How to allow only binary digits in input
- location missing in props (ReactJS)
- How can I get Firebase authentication on initialization with React.js?
- Next.js: How can I use getStaticProps/getStaticPaths for sites with multiple domains/hostnames?
- Infinite Scroller duplicating list results [ReactJS]
- React Context Api vs Local Storage
- How to get key object out of an array
- NextJS - ReferrenceError: document is not defined
- Showing selected item in react js using bootstrap v5.0
- Material UI card content height/cardcontent fixed to bottom
- How can i return the resized image from filereader
- How to Map json file in React
- Autoplay is removed from HTML after rendering
- ReactCSSTransitionGroup rendering list of items
- Wait for all promises to resolve before updating state and redirect