How to change focus/enable/disable textbox in child component based on parent button click?

Question

How to change focus/enable/disable textbox in a child component based on parent button click?

Answer

Use refs to expose child DOM nodes to the parent, then manipulate focus or disabled states.

import { useRef, forwardRef, useImperativeHandle } from 'react';

const ChildInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    disable: () => (inputRef.current.disabled = true),
    enable: () => (inputRef.current.disabled = false),
  }));

  return <input ref={inputRef} placeholder='Type here...' />;
});

export default function Parent() {
  const childRef = useRef();

  return (
    <div>
      <ChildInput ref={childRef} />
      <button onClick={() => childRef.current.focus()}>Focus</button>
      <button onClick={() => childRef.current.disable()}>Disable</button>
      <button onClick={() => childRef.current.enable()}>Enable</button>
    </div>
  );
}

✅ The parent can now directly call focus(), disable(), or enable() on the child.

Real-World Example

• Autofocusing search fields
• Enabling form fields after validation
• Triggering UI actions across components

Quick Practice

Build a parent/child pair where a “Reset” button in the parent clears the child input field.

Summary

Use useRef with forwardRef + useImperativeHandle to let parents control child component DOM behavior.