Skip to content

Instantly share code, notes, and snippets.

@castaneai castaneai/app.jsx

Created Feb 27, 2015
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.

Copy link

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.

Copy link

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.

Copy link

leyaannie commented Mar 26, 2018

this program is not correct


This comment has been minimized.

Copy link

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
You can’t perform that action at this time.