sel of three images. Each button centers an image by calling the
browser [ ` scrollIntoView() ` ](https://developer.mozilla.org/en-
US/docs/Web/API/Element/scrollIntoView) method on the corresponding DOM node:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useRef } from 'react';
    
    export default function CatFriends() {
      const firstCatRef = useRef(null);
      const secondCatRef = useRef(null);
      const thirdCatRef = useRef(null);
    
      function handleScrollToFirstCat() {
        firstCatRef.current.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'center'
        });
      }
    
      function handleScrollToSecondCat() {
        secondCatRef.current.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'center'
        });
      }
    
      function handleScrollToThirdCat() {
        thirdCatRef.current.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'center'
        });
      }
    
      return (
        <>
          <nav>
            <button onClick={handleScrollToFirstCat}>
              Tom
            </button>
            <button onClick={handleScrollToSecondCat}>
              Maru
            </button>
            <button onClick={handleScrollToThirdCat}>
              Jellylorum
            </button>
          </nav>
          <div>
            <ul>
              <li>
                <img
                  src="https://placekitten.com/g/200/200"
                  alt="Tom"
                  ref={firstCatRef}
                />
              </li>
              <li>
                <img
                  src="https://placekitten.com/g/300/200"
                  alt="Maru"
                  ref={secondCatRef}
                />
              </li>
              <li>
                <img
                  src="https://placekitten.com/g/250/200"
                  alt="Jellylorum"
                  ref={thirdCatRef}
                />
              </li>
            </ul>
          </div>
        </>
      );
    }
    
    

Show more

#####  Deep Dive

####  How to manage a list of refs using a ref callback

Show Details

In the above examples, there is a predefined number of refs. However,
sometimes you might need a ref to each item in the list, and you don’t know
how many you will have. Something like this **wouldn’t work** :

    
    
    <ul>  
    
    
      {items.map((item) => {  
    
    
        // Doesn't work!  
    
    
        const ref = useRef(null);  
    
    
        return <li ref={ref} />;  
    
    
      })}  
    
    
    </ul>

This is because **Hooks must only be called at the top-level of your
component.** You can’t call ` useRef ` in a loop, in a condition, or inside a
` map() ` call.

One possible way around this is to get a single ref to their parent element,
and then use DOM manipulation methods like [ ` querySelectorAll `
](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
to “find” the individual child nodes from it. However, this is brittle and can
break if your DOM structure changes.

Another solution is to **pass a function to the` ref ` attribute. ** This is
called a [ ` ref ` callback. ](/reference/react-dom/components/common#ref-
callback) React will call your ref callback with the DOM node when it’s time
to set the ref, and with ` null ` when it’s time to clear it. This lets you
maintain your own array or a [ Map ](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Map) , and access any ref by
its index or some kind of ID.

This example shows how you can use this approach to scroll to an arbitrary
node in a long list:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbo