How do I use multiple refs in functional components?

How do I use multiple refs in functional components?

You can use the useRef hook to create multiple refs in a functional component. Just call useRef for each ref you need.

Can you show me an example of using multiple refs?

Sure! Here's a simple example:

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef1 = useRef(null);
  const inputRef2 = useRef(null);

  const focusInput1 = () => {
    inputRef1.current.focus();
  };

  const focusInput2 = () => {
    inputRef2.current.focus();
  };

  return (
    <div>
      <input ref={inputRef1} type="text" placeholder="Input 1" />
      <input ref={inputRef2} type="text" placeholder="Input 2" />
      <button onClick={focusInput1}>Focus Input 1</button>
      <button onClick={focusInput2}>Focus Input 2</button>
    </div>
  );
};

This component has two input fields and buttons to focus each input.

What if I want to use refs for DOM elements other than inputs?

You can use refs for any DOM element, like divs or spans. Just assign the ref to the desired element, and you can manipulate it similarly.