How to use useRef() for multiple components and to scroll down to a specific component when user clicks

Question

I have 7 components on a website page with a navbar on the top. The navbar have 7 titles that representing those 7 components. Each component has complicated data structures and flows. What I want to achieve is; when a user clicks on one of navbar's title, it will scroll down to the specific components.

My questions;

How can I use useRef() for multiple components in React Typescript?
Is there any example that I can refer to?

Example code:

const SectionOne = () => Section One
const SectionTwo = () => Section Two
const SectionThree = () => Section Three
const SectionFour = () => Section Four
const SectionFive = () => Section Five
const SectionSix = () => Section Six
const SectionSeven = () => Section Seven

const titlesArr = ["One", "Two", "Three", "Four", "Five", "Six", "Seven"]

const nav = () => {

return (
  <>
    {
      titlesArr.map((i) =>
        {i}
      
    }
  
);
}

const App = () => {

return (
  
  
  
  
  
  
  
  
);
}

T.J. Crowder · Accepted Answer

You can do this with React, but you might want to consider giving the elements id values and then just using ... to scroll to them using the browser's built-in handling. That also has the advantage of adding a history entry and providing a hash fragment in the URL that the use can bookmark.

If for some reason you don't want to do that, you can use seven useRef calls, either by repeating them in the code or by using a loop, to get seven refs. Then you can put them on the seven elements and, when a relevant navigation element is clicked, use the ref that relates to to scroll the element into view (for instance, using scrollInView):

const { useRef } = React;

const NavBar = ({sections}) => {
    const scrollToSection = (event, ref) => {
        event.preventDefault();
        ref.current.scrollIntoView({
            behavior: "smooth",
        });
    };
    return 
        {sections.map(({title, ref}) =>
             scrollToSection(event, ref)}>
                {title}
            
        )}
    ;
};

const sectionTitles = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
];
const Example = () => {
    const sections = sectionTitles.map((title) => {
        return {title, ref: useRef(null)};
    });
    
    return 
        
        
            {sections.map(({title, ref}) =>
                
                    {title}
                
            )}
        
    ;
};

ReactDOM.createRoot(document.getElementById("root"))
.render();

section {
    min-height: 20rem;
    border: 1px solid black;
}
nav a {
    padding-left: 4px;
    padding-right: 4px;
}

You've edited your question to show an MRE of what you currently have (although App has an error, you can't have adjacent JSX elements without some kind of wrapper). I would take those individual SectionOne, SectionTwo, etc. variables and put them in an array (not unlike the above), but keep reading if you don't want to do that. You'll also need to wrap your sections in a call to forwardRef and accept the ref parameter (details here):

const { useRef, forwardRef } = React;

// Since you'll need *something* that relates titles to sections,
// and you already had an array of titls, it seems reasonable to use
// an array rather than individual `SectionOne`, `SectionTwo`, etc. 
// constants for that. But you can have them and then repeat them below
// for the `Section` values if you prefer.
const sections = [
    {title: "One",   Section: forwardRef((_, ref) => Section One)},
    {title: "Two",   Section: forwardRef((_, ref) => Section Two)},
    {title: "Three", Section: forwardRef((_, ref) => Section Three)},
    {title: "Four",  Section: forwardRef((_, ref) => Section Four)},
    {title: "Five",  Section: forwardRef((_, ref) => Section Five)},
    {title: "Six",   Section: forwardRef((_, ref) => Section Six)},
    {title: "Seven", Section: forwardRef((_, ref) => Section Seven)},
];

// If you need the `titlesArr` for something:
const titlesArr = sections.map(({title}) => title);

const Nav = ({sections, refs}) => {
    const scrollTo = (ref) => {
        ref.current.scrollIntoView({behavior: "smooth"});
    };
    return sections.map(({title, ref}) =>
         scrollTo(ref)}>{title}
    );
};

const App = () => {
    const sectionsWithRefs = sections.map(section => ({
        ...section,
        ref: useRef(null),
    }));
    return 
        
        {sectionsWithRefs.map(({title, Section, ref}) => )}
        {/* Just for the example, a spacer so we have room to scroll down to sections */}
        
    ;
};

ReactDOM.createRoot(document.getElementById("root"))
.render();

If you really want those individual SectionOne, SectionTwo, etc.:

const { useRef, forwardRef } = React;

const SectionOne   = forwardRef((_, ref) => Section One);
const SectionTwo   = forwardRef((_, ref) => Section Two);
const SectionThree = forwardRef((_, ref) => Section Three);
const SectionFour  = forwardRef((_, ref) => Section Four);
const SectionFive  = forwardRef((_, ref) => Section Five);
const SectionSix   = forwardRef((_, ref) => Section Six);
const SectionSeven = forwardRef((_, ref) => Section Seven);

// Since you'll need *something* that relates titles to sections,
// and you already had an array of titls, it seems reasonable to use
// an array rather than individual `SectionOne`, `SectionTwo`, etc. 
// constants for that. But you can have them and then repeat them below
// for the `Section` values if you prefer.
const sections = [
    {title: "One",   Section: SectionOne},
    {title: "Two",   Section: SectionTwo},
    {title: "Three", Section: SectionThree},
    {title: "Four",  Section: SectionFour},
    {title: "Five",  Section: SectionFive},
    {title: "Six",   Section: SectionSix},
    {title: "Seven", Section: SectionSeven},
];

// If you need the `titlesArr` for something:
const titlesArr = sections.map(({title}) => title);

const Nav = ({sections, refs}) => {
    const scrollTo = (ref) => {
        ref.current.scrollIntoView({behavior: "smooth"});
    };
    return sections.map(({title, ref}) =>
         scrollTo(ref)}>{title}
    );
};

const App = () => {
    const sectionsWithRefs = sections.map(section => ({
        ...section,
        ref: useRef(null),
    }));
    let n = 0;
    return 
        
        {/* I would use `sectionsWithRefs` as in the previous example, but
        if you _really_ don't want to: */}
        
        
        
        
        
        
        
        {/* Just for the example, a spacer so we have room to scroll down to sections */}
        
    ;
};

ReactDOM.createRoot(document.getElementById("root"))
.render();

How to use useRef() for multiple components and to scroll down to a specific component when user clicks

Answers (1)

Related Questions