08 - Counter - React State

08-counter-react-state.markdown

08 - Counter - React State

A Pen by Etienne Deladonchamps on CodePen.

License.

script.babel

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }

  increment(amount) {
    this.setState(prevState => ({ counter: prevState.counter + amount }));
  }

  render() {
    return (
      <div>
        <span>{this.state.counter}</span>
        {this.state.counter > 0 &&
          <button
            onClick={() => {
              this.increment(-1);
            }}
          >
            -
          </button>}
        {this.state.counter < 10 &&
          <button
            onClick={() => {
              this.increment(1);
            }}
          >
            +
          </button>}
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.body);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>