Instantly share code, notes, and snippets.

What would you like to do?
React.js (ES6) Simple Counter
class App extends React.Component {
constructor(props) {
this.state = {
count: 0
onClick(e) {
count: this.state.count + 1
render() {
return (
<button onClick={this.onClick.bind(this)}>Count Up!!</button>
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>React Test</title>
<script src=""></script>
<script src=""></script>
<script src="app.jsx" type="text/jsx;harmony=true"></script>
<div id="app-container"></div>

This comment has been minimized.

julianguarinautoformax commented Feb 27, 2017

Why a state for a counter? This notion confuses me..... is this just a mere example, or states are used for variables heavily when doing code in JSX?

Why not a variable?

Thank you.


This comment has been minimized.

adeelibr commented Mar 10, 2017

@julianguarinautoformax because every time the counter value changes the UI has to be re-rendered to show the updated value of count.


This comment has been minimized.

leyaannie commented Mar 26, 2018

this program is not correct


This comment has been minimized.

fanux365 commented Apr 14, 2018

// Wrong
  counter: this.state.counter + this.props.increment,

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment