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.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.