x")

    
    
    import { useRef } from 'react';
    
    export default function CatFriends() {
      const itemsRef = useRef(null);
    
      function scrollToId(itemId) {
        const map = getMap();
        const node = map.get(itemId);
        node.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'center'
        });
      }
    
      function getMap() {
        if (!itemsRef.current) {
          // Initialize the Map on first usage.
          itemsRef.current = new Map();
        }
        return itemsRef.current;
      }
    
      return (
        <>
          <nav>
            <button onClick={() => scrollToId(0)}>
              Tom
            </button>
            <button onClick={() => scrollToId(5)}>
              Maru
            </button>
            <button onClick={() => scrollToId(9)}>
              Jellylorum
            </button>
          </nav>
          <div>
            <ul>
              {catList.map(cat => (
                <li
                  key={cat.id}
                  ref={(node) => {
                    const map = getMap();
                    if (node) {
                      map.set(cat.id, node);
                    } else {
                      map.delete(cat.id);
                    }
                  }}
                >
                  <img
                    src={cat.imageUrl}
                    alt={'Cat #' + cat.id}
                  />
                </li>
              ))}
            </ul>
          </div>
        </>
      );
    }
    
    const catList = [];
    for (let i = 0; i < 10; i++) {
      catList.push({
        id: i,
        imageUrl: 'https://placekitten.com/250/200?image=' + i
      });
    }
    
    

Show more

In this example, ` itemsRef ` doesn’t hold a single DOM node. Instead, it
holds a [ Map
](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map)
from item ID to a DOM node. ( [ Refs can hold any values!
](/learn/referencing-values-with-refs) ) The [ ` ref ` callback
](/reference/react-dom/components/common#ref-callback) on every list item
takes care to update the Map:

    
    
    <li  
    
    
      key={cat.id}  
    
    
      ref={node => {  
    
    
        const map = getMap();  
    
    
        if (node) {  
    
    
          // Add to the Map  
    
    
          map.set(cat.id, node);  
    
    
        } else {  
    
    
          // Remove from the Map  
    
    
          map.delete(cat.id);  
    
    
        }  
    
    
      }}  
    
    
    >

This lets you read individual DOM nodes from the Map later.

##  Accessing another component’s DOM nodes

When you put a ref on a built-in component that outputs a browser element like
` <input /> ` , React will set that ref’s ` current ` property to the
corresponding DOM node (such as the actual ` <input /> ` in the browser).

However, if you try to put a ref on **your own** component, like ` <MyInput />
` , by default you will get ` null ` . Here is an example demonstrating it.
Notice how clicking the button **does not** focus the input:

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';
    
    function MyInput(props) {
      return <input {...props} />;
    }
    
    export default function MyForm() {
      const inputRef = useRef(null);
    
      function handleClick() {
        inputRef.current.focus();
      }
    
      return (
        <>
          <MyInput ref={inputRef} />
          <button onClick={handleClick}>
            Focus the input
          </button>
        </>
      );
    }
    
    

Show more

To help you notice the issue, React also prints an error to the console:

Console

Warning: Function components cannot be given refs. Attempts to access this ref
will fail. Did you mean to use React.forwardRef()?

This happens because by defaul