title: Passing a Prop in an On Click Function in React/Redux
body: <p>I have an <code>onClick</code> function that calls an action creator called <code>toggleButton</code> which changes the state of <code>this.props.UserOpen</code>. The following code WORKS and sets the prop <code>UserOpen</code> to true. </p>
  
  <pre><code>class ButtonComponent extends Component {
    render() {
      return (
        &lt;div &gt;
          &lt;a href="javascript:;" onClick={this.props.toggleButton.bind(this, true)}&gt;Click Me!&lt;/a&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return { UserOpen: state.UserOpen };
  }
  
  function mapDispatchToProps(dispatch){
    return bindActionCreators({toggleButton}, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(ButtonComponent);
  </code></pre>
  
  <p>Here's the offending Code which I want to incorporate. </p>
  
  <pre><code> &lt;a href="javascript:;" onClick={this.props.toggleButton.bind(this, {!this.props.UserOpen})}&gt;Click Me!&lt;/a&gt;
  </code></pre>
  
  <p>When <code>onClick</code> is called, I want to toggle the UserOpen prop in the <code>toggleButton</code> parameter between <code>true</code> and <code>false</code>. Is this possible or do I have to make a separate function to call the action creator?</p>
  
  <p>EDIT-- more code</p>
  
  <p>actions.js</p>
  
  <pre><code>export function toggleButton(status){
    return {
      type: BUTTON_OPEN,
      payload: status
   };
  </code></pre>
  
  <p>}</p>
  
  <p>reducer.js</p>
  
  <pre><code>const INITIAL_STATE = { buttonOpen:true};
  
  export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
      case BUTTON_OPEN:
          return {...state, buttonOpen: action.payload};
    }
    return state;
  }
  </code></pre>