CODEWITHSUNDEEP
reactjsecmascript-6
Sharon Chai
Sharon Chai

Reputation: 517

ES6 computed property in react

My 4th caret is broken, I have no clue why it doesn't decrement.

constructor(props) {
  super(props);
  this.containerWidth = props.width || "100%";

  this.state = {
    current_hour: 0,
    current_minute: 0,
    hour_interval: 1,
    minute_interval: 1
  };

  // this.handleAdjuster = this.handleAdjuster.bind(this);
}

handleAdjuster(action, type) {
  if (action === "add") {
    this.setState({
      [`current_${type}`]: this.state[`current_${type}`] + this.state[`${type}_interval`]
    });
  } else if (action === "minus") {
    this.setState({
      [`current_${type}`]: this.state[`current_${type}`] - this.state[`${type}_interval`]
    });
  }
}

Is there anything wrong with my click handler? I did a demo https://codesandbox.io/s/v8xw3lnzpy to showcase my problem, try to click the 4th caret.

Upvotes: 0

Views: 767

Answers (1)

ivica.moke
ivica.moke

Reputation: 1064

Your "minus" (4rth) carret is inside "add" (3rd) carret, and whenever you press "minus" first child is done and minus is done, but then also parent is done (and that is "add" 3rd carret) that overrides 4th carret. Put your 4rth carret div under your 3rd and not inside. Simple hierarchical mistake.

Something like this:

  <div>
    <div className="control-wrap">
      <div
        onClick={() => this.handleAdjuster("add", "minute")}
        className="caret-wrap"
      >
        <span className="caret">&#9650;</span>
      </div>

      <div
        onClick={() => this.handleAdjuster("minus", "minute")}
        className="caret-wrap"
      >
        <span className="caret">&#9660;</span>
      </div>
    </div>
  </div>

Upvotes: 2

Related Questions