Назад к задачам
Junior — Senior
5

Обнаружить и исправить ошибки в React‑компоненте

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

В представленном ниже React‑компоненте присутствуют логические ошибки, из‑за которых поле ввода не получает фокус при отображении. Найдите и исправьте их, изменив код так, чтобы кнопка показывала инпут и сразу ставила на него курсор.

import { useRef, useState } from "react";

export default function App() {
  const [visible, setVisible] = useState(false);
  const refInput = useRef();

  const handleToggle = () => {
    setVisible(true);
    refInput.current.focus();
  };

  return (
    <div>
      <button onClick={handleToggle}>Show and focus input</button>
      {visible && <input ref={refInput} type="text" />}
    </div>
  );
}