// counter.jsx
import React, { Component } from "react";
class Counter extends Component {
state = {
total: 996
};
render() {
return (
<React.Fragment>
<span className={this.setStyle()}>
Render Dynamically With bootstrap.css:{" "}
{this.getTotal()}
</span>
</React.Fragment>
);
}
setStyle() {
let classes = "badge m-2 badge-";
classes += this.state.total === 0 ? "warning" : "primary";
return classes;
}
getTotal() {
const { total } = this.state;
return total === 0 ? "Zero" : total;
}
}
export default Counter;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter'
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
serviceWorker.unregister();
/*
run:
Render Dynamically With bootstrap.css: 996
*/