In React, why does this onClick snippet of code work but not this other way ive tried to write it?

Question

Why does this work for the onClick

const mapDispatchToProps = (dispatch) => ({
  toggleCartHidden: () => dispatch(toggleCartHidden()),
});

<Button
  onClick={() => {
    history.push('/checkout');
    toggleCartHidden();
  }}
>Button text</Button>

But this doesnt work (the routing doesnt work)

<Button
  onClick={
    (() => {
      history.push('/checkout');
    },
    toggleCartHidden)
  }
>Button text</Button>

I have another component with similar code that works with this syntax with onClick (no function call within onClick)

const mapDispatchToProps = (dispatch) => ({
  toggleCartHidden: () => dispatch(toggleCartHidden()),
});

<div className='cart-icon' onClick={toggleCartHidden}> ICON </div>

Rafael Buzatto de Campos · Accepted Answer · 2021-02-11 21:48:38Z

1

because you are passing an expression that is evaluated. At expression you use , operator that evaluates each part, but it only returns the last one which is toggleCartHidden.

if you do (1, 3, 5) on your console it returns 5.

answered Feb 11, 2021 at 21:48

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

In React, why does this onClick snippet of code work but not this other way ive tried to write it?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related