11 - Multiple Counters - Callbacks

11-multiple-counters-callbacks.markdown

11 - Multiple Counters - Callbacks

A Pen by Etienne Deladonchamps on CodePen.

License.

script.babel

const Counter = props =>
  <div>
    <span>{props.value}</span>
    {props.value > 0 &&
      <button
        onClick={() => {
          props.onDecrementClicked();
        }}
      >
        -
      </button>}
    {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() {
    return (
      <div>
        <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)}
            />
          )}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Counters />, 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>