title: Button Link Does Not Invoke Handler in React
body: <p>I'm trying to use a <a href="https://react-bootstrap.github.io/components.html#buttons" rel="nofollow noreferrer">React Bootstrap Button Link</a> to call a handler</p>
  
  <p>I'm not sure why the click when clicked is not invoking my handler:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { HelpBlock, Button, Table } from 'react-bootstrap'
  
  export default class Users extends Component {
    render() {
      const { users } = this.props
      return (&lt;span&gt;&lt;UserList list={users} /&gt;&lt;/span&gt;)
    }
  }
  
  export class UserList extends Component {
    render(){
      const { handleResetPassword, list, resetPasswordError } = this.props
      const userList = list &amp;&amp; list.map(
          (user, i) =&gt;
            &lt;User
              handleResetPassword={handleResetPassword}
              key={i}
              resetPasswordError={resetPasswordError}
              user={user}
            /&gt;)
  
      return(&lt;Table responsive&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;First&lt;/th&gt;
            &lt;th&gt;Last&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;{userList}&lt;/tbody&gt;
      &lt;/Table&gt;)
    }
  }
  
  export class User extends Component {
    render() {
      const { uuid, firstName, lastName, email } = this.props.user
  
      return (
        &lt;tr&gt;
          &lt;td&gt;{firstName}&lt;/td&gt;
          &lt;td&gt;{lastName}&lt;/td&gt;
          &lt;td&gt;
           &lt;HelpBlock disabled={this.props.resetPasswordError ? true : false}&gt;{this.props.resetPasswordError}&lt;/HelpBlock&gt;
            &lt;Button
              bsStyle='link'
              onClick={this.props.handleResetPassword}
            &gt;
              reset password
            &lt;/Button&gt;&lt;/td&gt;
        &lt;/tr&gt;
      )
    }
  }
  </code></pre>
  
  <p><em>I also noticed that on page load, it's auto hitting my handler for some reason, I didn't even click the button.  I see the <code>console.log("handleResetPassword invoked!")</code> being hit...not sure why</em></p>
  
  <p><strong>UsersContainer</strong>
  (I will be refactoring this code to remove duplication so FYI in that setState in the try/catch)</p>
  
  <pre><code>import { connect } from 'react-redux'
  import React, { Component } from 'react'
  
  import * as UserAsyncActions from '../actions/Users/UserAsyncActions'
  import Users from '../components/Users/UserList'
  
  class UsersContainer extends Component {
    constructor(props){
      super(props)
  
      this.state = {
        resetPasswordError: null
      }
  
      this.handleResetPassword = this.handleResetPassword(this)
    }
    async componentDidMount() {
      await this.props.allUsers(this.props.token)
    }
  
    async handleResetPassword() {
      // e.preventDefault()
      console.log("handleResetPassword invoked!")
      try {
        await this.props.resetUserPassword()
        if(this.props.hasResetPassword){
          // show successful message (set message here)
          return
        }
      }
      catch(err) {
        this.setState({
          resetEmailValidationState: 'error',
          resetPasswordError: !this.state.hasResetPassword &amp;&amp; 'reset failed'
        })
      }
  
      this.setState({
        resetEmailValidationState: 'error',
        resetPasswordError: !this.state.hasResetPassword &amp;&amp;
        'reset failed'
      })
    }
  
    render(){
      return (
        &lt;Users
          handleResetPassword={this.handleResetPassword}
          resetPasswordError={this.state.resetPasswordError}
          users={this.props.users}
        /&gt;)
    }
  
  }
  export const mapStateToProps = state =&gt; ({
    isRequestingAllUsers: state.user.isRequestingAllUsers,
    hasResetPassword: state.user.hasResetPassword,
    users: state.user.users,
    token: state.auth.token
  })
  
  export const mapDispatchToProps = {
    allUsers: UserAsyncActions.allUsers,
    resetUserPassword: UserAsyncActions.resetPasssord
  }
  
  export { Users }
  export default connect(mapStateToProps, mapDispatchToProps)(UsersContainer)
  </code></pre>