How to scroll to a functional component in React?

Question

I am new to Reactjs. I have functional component that has Title defined, now i want scroll to be implemented when a user clicks on the title, user should be scrolled to appropriate functional component in the same page below

const Page = () => {

  return (
    <div>
         <div>
            About Us
        </div>
        <div>
            Contact Us
        </div>
        <AboutUs/>
        <ContactUs/>
   </div>
  );
};

In the above code scrolling should happpen when user clicks on About Us or Contact Us

Can someone please help me in implementing the scrolling?

Answer 1

Same old HTML technique can be used here. Point the link of your About or Contact us section, to the id of the wrapper element of that particular section.

const SomeComponent = () => {
    return (
        <div>
            // content...
            <a href="#about">About</a>
        </div>
    )
}

const About = () => {
    return (
        <div id='about'>
            // content...
        </div>
    )
}

You can use Routing to consume multiple pages functionality in SPAs. Check out react-router-dom