Rendering Classes Dynamically

Membuat tombol lebih dinamis

import React, { Component }  from 'react';

class Counter extends Component {
    state = {
        // ganti 1 jika ingin berubah warna button nya jadi primary (biru)
        count: 0 
    };

    render() {
        let classes = "badge m-2 badge-";
        classes += this.state.count === 0 ? "warning" : "primary";

        return(
            <div>
                <span className={classes}>{this.formatCount()}</span>
                <button className="btn btn-secondary btn-sm">Increment</button>
            </div>
        ) 
    }

    formatCount() {
        const { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}

export default Counter

atau bisa di sederhanakan codingan nya seperti ini :

import React, { Component }  from 'react';

class Counter extends Component {
    state = {
        count: 1
    };

    render() {
        return(
            <div>
                <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                <button className="btn btn-secondary btn-sm">Increment</button>
            </div>
        ) 
    }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.state.count === 0 ? "warning" : "primary";
        return classes;
    }

    formatCount() {
        const { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}

export default Counter