// src/components/counter.jsx
import React, { Component } from "react";
class Counter extends Component {
state = {
total: 12
};
totalPlus = (e) => {
console.log(e);
this.setState({ total: this.state.total + 1 });
};
render() {
return (
<React.Fragment>
<span className={this.setStyle()}>
Render Dynamically With bootstrap.css: {this.getTotal()}
</span>
{ /* Pass event argument */}
<button onClick={ () => this.totalPlus({ id: 8364 })} className="btn btn-secondary btn-sm">
+
</button>
</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;
// src/components/multiplecounters.jsx
import React, { Component } from 'react';
import Counter from "./counter"
class MultipleCounters extends Component {
state = { }
render() {
return (
<div>
<Counter />
<Counter />
<Counter />
</div>
);
}
}
export default MultipleCounters;
// src/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 MultipleCounters from './components/multiplecounters'
ReactDOM.render(
<MultipleCounters />,
document.getElementById('root')
);
serviceWorker.unregister();
/*
run:
Render Dynamically With bootstrap.css: 13
Render Dynamically With bootstrap.css: 14
Render Dynamically With bootstrap.css: 15
{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}
*/