Generic Button Reusability not able to implement in ReactJS

Question

I have created a button component in react. Functionality is working but I'm unable to change the button colors and style

parent.js

import React, { Component } from "react";
import {Button, TYPES} from '../../../Global/button';

class ProductDisplay extends Component{
  render(){
    return(
      <Button buttonType={TYPES.DANGER} label="Add To Cart" onClick={() => 
        this.addItemToCart(pdpList.uniqueID)}></Button>
    )
  }
}

export default ProductDisplay;

button.js

import React from 'react';
import classnames from 'classnames';
export const TYPES = {
  PRIMARY: 'btn-primary',
  WARNING: 'btn-warning',
  DANGER: 'btn-danger',
  SUCCESS: 'btn-success',
}

export const Button = (props) => (
  <button buttonType={props.TYPES} onClick={props.onClick} classnames={ 
   [props.buttonType || TYPES.PRIMARY] 
  }>
    {props.label} 
  </button>
);

I'm not able to change the color. Can anybody help me

Just code · Accepted Answer · 2019-01-04 12:30:11Z

2

instead of buttonType you need to use props here

 [props.buttonType || TYPES.PRIMARY]

You are already passing the buttonType from the parent component.

Demo

answered Jan 4, 2019 at 12:30

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shaswati Bhattacharyya Over a year ago

but my color is not changing

tomvalorsa · Accepted Answer · 2019-01-04 12:35:24Z

1

In button.js:

export const Button = (props) => (
  <button
    onClick={props.onClick}
    className={styles[props.buttonType || TYPES.PRIMARY]} 
  >
    {props.label} 
  </button>
);

Bear in mind that the prop name for classes is singular and camelcase, i.e. className rather than classnames.

answered Jan 4, 2019 at 12:35

tomvalorsa

3023 silver badges5 bronze badges

Collectives™ on Stack Overflow

Generic Button Reusability not able to implement in ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related