toggle button colors

import React, {Component} from 'react';
import {ProductConsumer} from "../context";
import {Link} from 'react-router-dom';
import {ButtonContainer} from "./Button";

export default class Details extends Component {
    constructor(props) {
        super(props);
        this.state = {
            white: true,
            small: false,
            medium: false,
            large: false,
            xLarge: false,
        };
        this.sizeClicked = this.sizeClicked.bind(this);
    }

    sizeClicked() {
        this.setState({white: !this.state.white});
    }

    render() {
        // let color_switch_size = this.state.white ? "white-btn" : "green-btn";
        return (
            <ProductConsumer>
                {value => {
                    const {id, company, img, info, small, medium, large, xLarge, price, title, inCart} = value.detailProduct;
                    console.log(value.detailProduct);
                    return (
                        <div className="container py-5">
                            {/*  title  */}
                            <div className="row">
                                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                                    <h1>{title}</h1>
                                </div>
                            </div>
                            {/* end title */}
                            {/* product info */}
                            <div className="row">
                                <div className="col-10 mx-auto col-md-6 my-3">
                                    <img src={img} className="img-fluid" alt="product"/>
                                </div>
                                {/* product text */}
                                <div className="col-10 mx-auto col-md-6 my-3 mt-5">
                                    {/*<h2>{title}</h2>*/}
                                    <h1 className="text-title text-uppercase text-muted mt-3 mb-2">
                                        <span className="text-uppercase shirts">
                                    {company}
                                </span>
                                    </h1>
                                    <h1 className="text-blue">
                                        <strong>
                                            <span>$</span>
                                            {price}
                                        </strong>
                                    </h1>
                                    <button className={`${this.state.white ? "white-btn" : "green-btn"} text-capitalize font-weight-bold mt-3 mb-0 btn btn-light`} onClick={this.sizeClicked}>
                                        {small}
                                    </button>
                                    <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
                                        {medium}
                                    </button>
                                    <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
                                        {large}
                                    </button>
                                    <button className="text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" onClick={this.sizeClicked}>
                                        {xLarge}
                                    </button>
                                    {/* buttons */}
                                    <div>
                                        <Link to="/">
                                            <ButtonContainer>back to products
                                            </ButtonContainer>
                                        </Link>
                                        <ButtonContainer
                                            cart
                                            disabled={inCart ? true : false}
                                            onClick={() => {
                                                value.addToCart(id);
                                                value.openModal(id);
                                            }}>
                                            {inCart ? 'inCart' : "add to cart"}
                                        </ButtonContainer>
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                }}
            </ProductConsumer>
        );
    }
}