10 - Multiple Counters - State in Counters

10-multiple-counters-state-in-counters.markdown

10 - Multiple Counters - State in Counters

A Pen by Etienne Deladonchamps on CodePen.

License.

script.babel

const Counter = props =>
  <div>
    <span>{props.value}</span>
    {props.value > 0 &&
      <button
        onClick={() => {
          // what should we do here ?
        }}
      >
        -
      </button>}
    {props.value < 10 &&
      <button
        onClick={() => {
          // what should we do here ?
        }}
      >
        +
      </button>}
  </div>;

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

  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} />)}
        </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>