How can I manage focus with refs in React?

How can I manage focus with refs in React?

You can manage focus in React using the useRef hook to create a reference to the DOM element you want to focus on.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useRef } from 'react';

const 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>
  );
};

export default FocusInput;

What if I want to focus on the input when the component mounts?

You can use the useEffect hook to focus the input when the component mounts. Here's how:

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
};

export default FocusInput;