Skip to content

Instantly share code, notes, and snippets.

@Siemko
Last active Jul 8, 2021
Embed
What would you like to do?
Counter component in React.js
import React, { Component } from "react";
export default class Counter extends Component {
state = {
title: "Counter",
counter: 0
};
incrementCounter = () => {
this.setState(prevState => ({
counter: prevState.counter + 1
}));
};
decrementCounter = () => {
this.setState(prevState => ({
counter: prevState.counter - 1
}));
};
render() {
return (
<section className="section">
<div className="container">
<h1 className="title">{this.state.title}</h1>
<div className="level">
<div className="level-item">
<button className="button" onClick={this.incrementCounter}>
<span className="icon">
<i className="fa fa-plus" />
</span>
</button>
</div>
<div className="level-item">
<h2>{this.state.counter}</h2>
</div>
<div className="level-item">
<button className="button" onClick={this.decrementCounter}>
<span className="icon">
<i className="fa fa-minus" />
</span>
</button>
</div>
</div>
</div>
</section>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment