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
useRefhook to reference the input element directly and call.focus()on it.
Requirements:
- Use the
useRefhook to get a reference to the input element. - The input must have placeholder "Type here'".
- 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

Preview what you need to build
Companies:
infosys
Solve Similar questions 🔥
Want to upskill? Explore our courses!
Namaste DSA
Master DSA from scratch with numerous problems, and expert guidance.
Namaste React
Wanna dive deep into React and become Frontend Expert? Learn with me now!
Namaste Frontend System Design
The most comprehensive and detailed course for frontend system design.
Namaste Node.js
Wanna dive deep into Node.js? Enroll into `Namaste Node.js` now!
