// src/App.js
import React, { Component } from 'react';
import MultipleCounters from './components/multiplecounters'
import NavBar from './components/navbar';
import './App.css';
class App extends Component {
state = {
counters: [
{ id: 1, cvalue: 3 },
{ id: 2, cvalue: 1 },
{ id: 3, cvalue: 7 }
]
};
// Handle event - update the state
deleteCounter = id => {
const newState = this.state.counters.filter(cr => cr.id !== id);
this.setState({ counters: newState });
};
// Handle Add Value
addValue = counter => {
const cloneCounters = [...this.state.counters];
const index = cloneCounters.indexOf(counter);
cloneCounters[index].cvalue++;
this.setState({ cloneCounters });
};
resetAll = () => {
const resetCounter = this.state.counters.map(ct => {
ct.cvalue = 0;
return ct;
});
this.setState({ resetCounter });
}
render() {
return (
<React.Fragment>
<NavBar countersCount={this.state.counters.length}/>
<main className="container">
<MultipleCounters
counters={this.state.counters}
// Event that raise by App component to modify the state (data)
onResetAll={this.resetAll}
onDeleteCounter={this.deleteCounter}
onAddValue={this.addValue}
/>
</main>
</React.Fragment>
);
}
}
export default App;// src/components/navbar.jsx
import React, { Component } from "react";
const NavBar = ({countersCount}) => {
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar{" "}
<span className="badge badge-secondary">
{countersCount}
</span>
</a>
</nav>
);
};
export default NavBar;// src/components/multiplecounters.jsx
import React, { Component } from "react";
import Counter from "./counter";
class MultipleCounters extends Component {
render() {
const {onResetAll, counters, onDeleteCounter, onAddValue} = this.props;
return (
<div>
<button
onClick={onResetAll}
className="btn btn-primary btn-sm m-2">
Reset All Counters
</button>
{counters.map(mcounter => (
// Pass data
<Counter
key={mcounter.id}
// Bubble the events to the parent component: App
onDelete={onDeleteCounter}
onAddValue={onAddValue}
// Pass state id and cvalue to: Counter
mcounter={mcounter}
/>
))}
</div>
);
}
}
export default MultipleCounters;// src/components/counter.jsx
import React, { Component } from "react";
class Counter extends Component {
render() {
//console.log(this.props);
return (
<div>
<h5>Counter Number: {this.props.mcounter.id}</h5>
<span className={this.setStyle()}>
Render Dynamically With bootstrap.css: {this.getTotal()}
</span>
{/* Pass event argument */}
<button
onClick={() => this.props.onAddValue(this.props.mcounter)}
className="btn btn-secondary btn-sm">
+
</button>
{/* Raise event */}
<button
onClick={() => this.props.onDelete(this.props.mcounter.id)}
className="btn btn-danger btn-sm m-2">
Del
</button>
</div>
);
}
setStyle() {
let classes = "badge m-2 badge-";
classes += this.props.mcounter.cvlaue === 0 ? "warning" : "primary";
return classes;
}
getTotal() {
const { cvalue } = this.props.mcounter;
return cvalue === 0 ? "Zero" : cvalue;
}
}
export default Counter;// 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';
ReactDOM.render(
<App />,
document.getElementById('root')
);
serviceWorker.unregister();
/*
run:
Counter Number: 1
Render Dynamically With bootstrap.css: 3
Counter Number: 2
Render Dynamically With bootstrap.css: 1
Counter Number: 3
Render Dynamically With bootstrap.css: 7
*/
