CODEWITHSUNDEEP
reactjs
Shaswati Bhattacharyya
Shaswati Bhattacharyya

Reputation: 261

Generic Button Reusability not able to implement in ReactJS

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

Upvotes: 1

Views: 211

Answers (2)

tomvalorsa
tomvalorsa

Reputation: 292

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.

Upvotes: 1

Just code
Just code

Reputation: 13801

instead of buttonType you need to use props here

 [props.buttonType || TYPES.PRIMARY]

You are already passing the buttonType from the parent component.

Demo

Upvotes: 2

Related Questions