Counter Application | Counter App in react js

Counter App in jsx:

File Name: src/App.js

  jsx

import Counter from "./components/Counter";


const App = () => {

return <Counter />

}


export default App;

File: src/components/Counter/index.js

jsx

import { Component } from "react"


import "./index.css"


class Counter extends Component {
state = { count: 0 }
on Increment = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }))
}
onDecrement = () => {
this.setState((prevState) => ({ count: prevState.count - 1 }))
}
render() {
const { count } = this.state
return (
<div className="container">
<h1 className="count">Count {count}</h1>
<button className="button" onClick={this.onIncrement}>
Increase
</button>
<button className="button" onClick={this.onDecrement}>
Decrease
</button>
</div>
)
}
}