Block default button action with in React

Question

I have one question. This is probably easy task but I am trying to overthink this. I have such situation:

<Button
 className={favorites ? styles.active : styles.outlines}
 onClick={() => addToFavorites({ id })}
 variant='outline'
>

This button is adding a product as favourite. But i want to prevent page from scrolling. The addToFavorites({ id }) is passed from props. Can i do something like this:

 const addFav = e => {
    e.preventDefault();
  };

and then

<Button
  className={favorites ? styles.active : styles.outlines}
  onClick={e => addToFavorites({ id }, addFav(e))}
  variant='outline'
>

Right now it is workning, but not sure if this is valid solution

yes, it is correct.

wentjun
– wentjun

2019-12-30 09:56:57 +00:00
Commented Dec 30, 2019 at 9:56 — wentjun
– wentjun, Commented Dec 30, 2019 at 9:56
You can use disabled property.

Shubham
– Shubham

2019-12-30 09:59:41 +00:00
Commented Dec 30, 2019 at 9:59 — Shubham
– Shubham, Commented Dec 30, 2019 at 9:59

Alok Mali · Accepted Answer · 2019-12-30 10:01:00Z

2

One another way to do it.

<Button className={favorites ? styles.active : styles.outlines} onClick={e => addFav(e,{id}))} variant='outline'>

const addFav = (e,id) => {
   e.preventDefault();
   addToFavorites(id);
};

answered Dec 30, 2019 at 10:01

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

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

2 Comments

shivetay Over a year ago

but this way i'm overwriting id

Alok Mali Over a year ago

but how? can you tell me?

Michalis Garganourakis · Accepted Answer · 2019-12-30 10:06:37Z

1

You don't need to pass addFav(e) as an argument to addToFavorites. Just call it directly after addToFavorites:

<Button
  className={favorites ? styles.active : styles.outlines}
  onClick={e => (addToFavorites({ id }), addFav(e))}
  variant='outline'
>

answered Dec 30, 2019 at 10:06

Michalis Garganourakis

2,9401 gold badge14 silver badges25 bronze badges

Collectives™ on Stack Overflow

Block default button action with in React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related