Next and Previous navigation I'm sorry, maybe this question is really stupid but I have really been thinking a lot about it recently, thinking of which type of &lt;prev | next&gt; web navigation approach is better. FYI the stack is React + Redux.


With using name properties (or also we can use something like custom boolean field forward="ture" and check it)

HTML:

  &lt;span&gt;
      &lt;button name="prev" onClick={this.onYearChange.bind(this)}&gt;Prev&lt;/button&gt;
      &lt;div&gt;{this.state.year}&lt;/div&gt;
      &lt;button name="next" onClick={this.onYearChange.bind(this)}&gt;Next&lt;/button&gt;
  &lt;/span&gt;


JS handler:

 onYearChange(e){
        let dir = (e.target.name === 'prev') ? -1 : 1,
            year = this.props.selectedYear + dir;

        this.props.onYearChangeHandler(year);
  }

With passing custom property dir with inc/dec value

HTML:

&lt;span&gt;
   &lt;button dir={-1} onClick={this.onYearChange.bind(this)}&gt;Prev&lt;/button&gt;
   &lt;div&gt;{this.state.year}&lt;/div&gt;
   &lt;button  dir={1} onClick={this.onYearChange.bind(this)}&gt;Next&lt;/button&gt;
&lt;/span&gt;


JS:

onYearChange(e){
        let dir = e.target.dir,
            year = this.props.selectedYear + dir;

        this.props.onYearChangeHandler(year);
}

Or with two separate binded functions

HTML:

 &lt;span&gt;
     &lt;button onClick={this.toPrevYear.bind(this)}&gt;Prev&lt;/button&gt;
     &lt;div&gt;{this.state.year}&lt;/div&gt;
     &lt;button onClick={this.toNextYear.bind(this)}&gt;Next&lt;/button&gt;
 &lt;/span&gt;


JS:

    toPrevYear(e) {
        this.onYearChange(-1);
    };

    toNextYear(e) {
        this.onYearChange(1);
    };

    onYearChange(val) {
        let year = this.props.selectedYear + val;

        this.props.onYearChangeHandler(year);
    }



Or is there some better solution for this scenario?
Think your worrying yourself about small details here, any advantages of one over the other would be minor at best.

I think out of all 3, the last solution would be my preferred one. It's clean from a code separation POV and does exactly what it says on the tin, also easier to change behaviour without affecting the other should that ever need to happen.

FWIW for performance reasons it's recommended you bind UI event handlers in the constructor e.g.

constructor() {
    this.toPrevYear = this.toPrevYear.bind(this);
}
...
render() {
    return &lt;button onClick={this.toPrevYear}&gt;Prev&lt;/button&gt;;
}