CODEWITHSUNDEEP
reactjsonclickactionredux
lost9123193
lost9123193

Reputation: 11030

Passing a Prop in an On Click Function in React/Redux

I have an onClick function that calls an action creator called toggleButton which changes the state of this.props.UserOpen. The following code WORKS and sets the prop UserOpen to true. 

class ButtonComponent extends Component {
  render() {
    return (
      <div >
        <a href="javascript:;" onClick={this.props.toggleButton.bind(this, true)}>Click Me!</a>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { UserOpen: state.UserOpen };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({toggleButton}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ButtonComponent);

Here's the offending Code which I want to incorporate. 

 <a href="javascript:;" onClick={this.props.toggleButton.bind(this, {!this.props.UserOpen})}>Click Me!</a>

When onClick is called, I want to toggle the UserOpen prop in the toggleButton parameter between true and false. Is this possible or do I have to make a separate function to call the action creator?

EDIT-- more code

actions.js

export function toggleButton(status){
  return {
    type: BUTTON_OPEN,
    payload: status
 };

}

reducer.js

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;
}

Upvotes: 1

Views: 5861

Answers (3)

Levsero
Levsero

Reputation: 641

<a href="javascript:;" onClick={this.toggleButton(this)}>Click Me!</a>

It's a good idea to not bind values in the render method where possible and also just for the sake of readability how about something like: 

toggleButton = () => {
  this.props.toggleButton(!this.props.userOpen)
} 

render() {
  return (
    <div >
      <a href="javascript:;" onClick={this.toggleButton}>Click Me!</a>
    </div>
  );
}

Upvotes: 1

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12872

If it's all about toggling a boolean value of a state property, than you can easily do it in the reducer:

case SOME_TYPE: {
  return Object.assign({}, state, {
    UserOpen: !state.UserOpen
  })      
}

In this case your action creator should have just the type property:

function toggleButton() {
  return {
    type: SOME_TYPE
  }
}

If you insist to pass a property from the component, you can do something like this:

class ButtonComponent extends Component {
  render() {
    this.toggleButton = this.props.toggleButton.bind(this)
    return (
      <div>
        <a href="javascript:;" onClick={function() { this.toggleButton(!this.props.UserOpen) }}> Click Me!</a>
      </div>
    );
  }
}

Upvotes: 2

kosker
kosker

Reputation: 333

You can not change the component's props, unless it is array or object. If you really want to change the props, than you can wrap it into an object and use the value instead. UserOpen will be an object containing value inside it.

<a href="javascript:;" onClick={this.props.toggleButton.bind(this, {!this.props.UserOpen.value})}>Click Me!</a>

However, updating the state instead of props is the best practice.

Upvotes: 0

Related Questions