How to scroll to specific location on button click in react?

Question

I'm making a website using react and I want a button to scroll to footer section of my website. I am using react-scroll and it is working. I am also using material ui to style my button using their Button component. This is my code snippet.

<StyledButton>
    <Link
     activeClass="active"
     to="Contact"
     spy={true}
     smooth={true}
     offset={-20}
     duration={900}
    >
     Get In Touch
    </Link>
</StyledButton>

This works but the only issue is it only works when I click on the text in the button. If I click anywhere else in the button(inside the button but not on text), it doesn't scroll to footer section. Any suggestions on how do I do that? Thanks.

Answer 1

You should place your Link outside of the button.

<Link 
    activeClass="active"
    to="Contact"
    spy={true}
    smooth={true}
    offset={-20}
    duration={900}
    >
    <StyledButton>
        Get In Touch
    </StyledButton>
 </Link>

This way, your whole button gets 'linked' to the element you provided