07 - Multiple Counters v2 - React JSX Clean

07-multiple-counters-v2-react-jsx-clean.markdown

07 - Multiple Counters v2 - React JSX Clean

A Pen by Etienne Deladonchamps on CodePen.

License.

script.babel

var body = document.body;

// State
var counters = [0, 0, 0];

// Render
function render() {
  return (
    <div>
      <button
        onClick={function() {
          counters.push(0);
          renderWithReact();
        }}
      >
        Add counter
      </button>
      <br />
      <div>
        {counters.map(function(value, index) {
          return (
            <div>
              <span>{value}</span>
              {value > 0 &&
                <button
                  onClick={function() {
                    counters[index] = value - 1;
                    renderWithReact();
                  }}
                >
                  -
                </button>}
              {value < 10 &&
                <button
                  onClick={function() {
                    counters[index] = value + 1;
                    renderWithReact();
                  }}
                >
                  +
                </button>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function renderWithReact() {
  ReactDOM.render(render(), body);
}

// Initial render
renderWithReact();

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>