React - Redux onClick event handler question

JavaScript
1

Hey there,

In the following piece of code, does anyone know why I have to use this syntax onClick={() => this.props.nextQuote(this.props.quotes)} instead of this onClick={ this.props.nextQuote(this.props.quotes)} in the event handler? nextQuote is the action creator which is passed to the component’s props through mapDispatchToProps and quotes is the reducer which is passed to the component’s props through mapStateToProps and includes a number of quotes.

class QuotesButtonWrapper extends React.Component{

  render(){
    return(
      
      <div className="buttons-wrapper">
       <a href={`https://twitter.com/intent/tweet?text=${this.props.quote.msg} - ${this.props.quote.by}`}  id="tweet-quote" className="btn btn-social-icon btn-twitter" target="_blank">
        <span className="fa fa-twitter"></span>
      </a>
     <button onClick={() => this.props.nextQuote(this.props.quotes)} className="btn btn-dark" id="new-quote">
                  Next
                </button>
       </div>

    )
    
  }
  
}
2

In the second piece of code we need to bind the ‘this’ keyword which we can do if we create a handleClick method in the component and bind it while we are calling the method like the folllowing code onClick ={this.handleClick.bind(this)}. On the other hand, the ‘this’ keyword is referring to the current instance when it’s placed within an arrow function and that’s why there is no need to bind it.