13 - Multiple Counters - Logger

13-multiple-counters-logger.markdown

13 - Multiple Counters - Logger

A Pen by Etienne Deladonchamps on CodePen.

License.

index.html

<div id="app"></div>
<div id="logger" style="position: fixed; right: 10px; top: 0px"></div>

script.babel

// Logger
var loggerEl = document.getElementById('logger');
function log(text) {
  const line = document.createElement("span");
  line.innerText = text;
  loggerEl.appendChild(line);
  loggerEl.appendChild(document.createElement("br"));
}
///////

const Counter = props => {
  log(`Render Counter number ${props.counterIndex} with value ${props.value}` );
  return (
    <div>
      <span>{props.value}</span>
      {props.value > 0 &&
        <button
          onClick={() => {
            props.onDecrementClicked();
          }}
        >
          -
        </button>}
      {(!props.hideIncrement && props.value < 10) &&
        <button
          onClick={() => {
            props.onIncrementClicked();
          }}
        >
          +
        </button>}
    </div>
  );
};

class Counters extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counters: [0, 0, 0]
    };
  }

  increment(counterIndex) {
    this.setState(prevState => {
      const copiedCounters = [...prevState.counters];
      copiedCounters[counterIndex] += 1;
      return { counters: copiedCounters };
    });
  }

  decrement(counterIndex) {
    this.setState(prevState => {
      const copiedCounters = [...prevState.counters];
      copiedCounters[counterIndex] -= 1;
      return { counters: copiedCounters };
    });
  }

  render() {
    const counterSum = this.state.counters.reduce((acc, val) => acc + val, 0);
    return (
      <div>
        <span>Sum: {counterSum}</span>
        <br />
        <button
          onClick={() => {
            // like push be we create a new array
            this.setState(prevState => ({
              counters: [...prevState.counters, 0]
            }));
          }}
        >
          Add counter
        </button>
        <br />
        <div>
          {this.state.counters.map((value, index) =>
            <Counter
              value={value}
              onIncrementClicked={() => this.increment(index)}
              onDecrementClicked={() => this.decrement(index)}
              hideIncrement={counterSum >= 20}
              counterIndex={/*used for loggin*/index}
            />
          )}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Counters />, document.getElementById('app'));

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>