Facebook Pixel

Focus Input

React.js
easy
20 mins

You are tasked with building a simple React component that demonstrates how to programmatically focus an input element using the useRef hook.

Create a functional component called InputFocus that:

  • Renders a text input and a button.
  • When the button is clicked, the input should automatically receive focus.
  • Uses the useRef hook to reference the input element directly and call .focus() on it.

Requirements:

  1. Use the useRef hook to get a reference to the input element.
  2. The input must have placeholder "Type here'".
  3. The button must be labelled "Focus Input".

Example Behavior:

  • On page load, the input is not focused.
  • When the user clicks the "Focus Input" button, the text cursor appears inside the input field, ready for typing.

Reference UI

focusInput

Preview what you need to build

Companies:

infosys

Solve Similar questions 🔥

Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.