React increment component

by gaelcadoret

HTML

<div id="root"></div>

CSS

body {
  background: #FFFFFF;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class MyReactComponent extends React.Component {
		constructor() {
			super();
			this.state = {
				idx: 0
			};
		}
    
    increment() {
    
    	this.setState({
            idx: this.state.idx + 1
      })
    }
    
    render() {
    	return (
            <div className="container__increment">
                <div className="increment__value">
                  {this.state.idx}
                </div>
                <button 
                    className="increment__button"
                    onClick={() => {
                        this.increment();
                    }}
                >+</button>
            </div>
        );
    }
}

ReactDOM.render(
  <MyReactComponent />,
  document.getElementById('root')
);