how react programmatically focus input

Question

I\'m trying to implement a very simple use case, a UI feature, where:

1. There is a label with some content in it
2. If clicked, a text input replaces it wi

Answer 1

@BenCarp's answer in typescript

Pass the inputRef to an input and just call setFocus to set the focus to it.

export const useInputFocus = (): [MutableRefObject, () => void] => {
  const inputRef = useRef();
  const setFocus = (): void => {
    const currentEl = inputRef.current;
    if (currentEl) {
      currentEl.focus();
    }
  };
  return [inputRef, setFocus];
};