Forwarding Ref

Forwarding Refs is a technique in React where you pass a ref from a parent component to a child component, allowing the child component to access the DOM node or instance of the parent component. Here’s an example to demonstrate Forwarding Refs:

javascriptCopy code
import React, { useRef, forwardRef } from "react";
const Input = forwardRef((props, ref) => {
  return (
    <div>
      <input type="text" ref={ref} />
    </div>
  );
});
const App = () => {
  const inputRef = useRef();
  const handleClick = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};
export default App;