React click counter

In this example below you will see how to do a React click counter with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bretteast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bretteast ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>React click counter</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="react-container"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bretteast/react-click-counter-ZLKVjO */
.count-board {
  display: block;
}
.count-board button {
  float: left;
}

.count-panel {
  border: 1px solid #eee;
  padding: 10px 20px;
  display: inline-block;
}


/*Downloaded from https://www.codeseek.co/bretteast/react-click-counter-ZLKVjO */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var CountPanel = function (_React$Component) {
  _inherits(CountPanel, _React$Component);

  function CountPanel(props) {
    _classCallCheck(this, CountPanel);

    var _this = _possibleConstructorReturn(this, (CountPanel.__proto__ || Object.getPrototypeOf(CountPanel)).call(this, props));

    _this.state = { count: 0 };
    return _this;
  }

  _createClass(CountPanel, [{
    key: "updateCount",
    value: function updateCount() {
      this.setState({ count: this.state.count + 1 });
    }
  }, {
    key: "resetCount",
    value: function resetCount() {
      this.setState({ count: 0 });
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        { className: "count-panel" },
        React.createElement(
          "h1",
          null,
          "Hello my count is ",
          this.state.count
        ),
        React.createElement(
          "button",
          { onClick: this.updateCount.bind(this) },
          "Add to count"
        ),
        React.createElement(
          "button",
          { onClick: this.resetCount.bind(this) },
          "Reset count"
        )
      );
    }
  }]);

  return CountPanel;
}(React.Component);

;

var CountBoard = function (_React$Component2) {
  _inherits(CountBoard, _React$Component2);

  function CountBoard(props) {
    _classCallCheck(this, CountBoard);

    var _this2 = _possibleConstructorReturn(this, (CountBoard.__proto__ || Object.getPrototypeOf(CountBoard)).call(this, props));

    _this2.state = { counter: 1 };
    return _this2;
  }

  _createClass(CountBoard, [{
    key: "addCounter",
    value: function addCounter() {
      this.setState({ counter: this.state.counter + 1 });
    }
  }, {
    key: "removeCounter",
    value: function removeCounter() {
      this.setState({ counter: this.state.counter > 1 ? this.state.counter - 1 : 0 });
    }
  }, {
    key: "counters",
    value: function counters() {
      var countersArray = [];
      for (var i = 0; i < this.state.counter; i++) {
        countersArray.push(React.createElement(CountPanel, { key: i }));
      }
      return countersArray;
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        { className: "count-board" },
        React.createElement(
          "button",
          { onClick: this.addCounter.bind(this) },
          "Add counter"
        ),
        React.createElement(
          "button",
          { onClick: this.removeCounter.bind(this) },
          "Remove counter"
        ),
        this.counters()
      );
    }
  }]);

  return CountBoard;
}(React.Component);

ReactDOM.render(React.createElement(CountBoard, null), document.getElementById('react-container'));

Comments