Reputation: 398
am using react-scroll
to get the smooth scroll effect after clicking on a component.
The problem is, when I added a button inside the component, to be able to make a favorite list, that after clicking on this button, the smooth scroll effect also occurs (which is understandable).
My question is, how can I prevent this behavior?
Short mockup:
import React from "react";
import { Link } from "react-scroll";
import iconSprites from "../images/sprite.svg";
const App = () => {
const handleClickFavorite = () => {
console.log("favorite clicked!");
};
return (
<Link
activeClass="active"
to="test-destination"
smooth={true}
spy={true}
duration={500}
className="App-Link"
>
<div className="App-item">
<img
className="App-item__img"
src={exampleSRC}
alt="img"
/>
<div className="App-item__text">
<p>Lorem ipsum</p>
</div>
<button
onClick={handleClickFavorite}
className="App-item__btn--favorite"
>
<svg className="App-item__icon--favorite">
<use href={iconSprites + "#icon-star"} />
</svg>
</button>
</div>
</Link>
);
};
export default App;
I have tried in css with overflow: hidden;
in .App-item__btn--favorite
but it did not work and was also hiding my icon (which I also understand - it is hiding the children of the button).
Any ideas are welcome.
EDIT:
As suggested below, I made the button as a sibling to the rest, but inside of the App-item
so that I could better position id. I added an additional after and now it is working. Below the solution:
return (
<div className="App-item">
<Link
activeClass="active"
to="test-destination"
smooth={true}
spy={true}
duration={500}
className="App-Link"
>
<div className="App-item__container">
<img
className="App-item__img"
src={exampleSRC}
alt="img"
/>
<div className="App-item__text">
<p>Lorem ipsum</p>
</div>
</div>
</Link>
<button
onClick={handleClickFavorite}
className="App-item__btn--favorite"
>
<svg className="App-item__icon--favorite">
<use href={iconSprites + "#icon-star"} />
</svg>
</button>
</div>
);
};
Upvotes: 0
Views: 1445
Reputation: 201
Since the button is a child element of the element wrapped with the Link component, the Link functionality extends to it.
Off the top of my head two solutions to this would be:
Make the div and the button elements siblings, position them over each other with css. That way you could wrap the div in a Link component without also wrapping the button.
Use an onClick handler on the button and preventDefault() to stop the inherited functionality from the div from happening (not sure this one works, would have to play around with it a bit to see if it actually does the job).
Upvotes: 1