How can I manage focus in a React application?

How can I manage focus in a React application?

You can manage focus in a React application using the ref attribute and the focus() method. Would you like an example?

Yes, please provide an example of how to use refs for focus management.

Sure! You can create a ref using useRef and then attach it to an input element. Here's a simple example:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus the input</button>
    </div>
  );
}

This will focus the input when the button is clicked.

What if I want to manage focus when navigating between components?

You can use the useEffect hook to manage focus when a component mounts or updates. You can set focus to a specific element based on the component's lifecycle.