🗃️ Forwarding Refs

Forwarding Refs

src/App.js

@@ -20,11 +20,13 @@ import ParentComp from "./components/ParentComp";
 import RefsDemo from "./components/RefsDemo1";
 import RefDemo2 from "./components/RefDemo2";
 import FocusInput from "./components/FocusInput";
+import FRParentInput from "./components/FRParentInput";
 
 function App() {
   return (
     <div className="App">
-      <FocusInput />
+      <FRParentInput />
+      {/* <FocusInput /> */}
       {/* <RefsDemo /> */}
       {/* <RefDemo2 /> */}
       {/* <ParentComp /> */}

src/components/FRInput.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const FRInput = React.forwardRef((props, ref) => {
+  return (
+    <div>
+      <input type="text" ref={ref} />
+    </div>
+  );
+});
+
+export default FRInput;

src/components/FRParentInput.js

@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+import FRInput from "./FRInput";
+
+export class FRParentInput extends Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+  }
+
+  clickHandler = () => {
+    this.inputRef.current.focus();
+  };
+
+  render() {
+    return (
+      <div>
+        <FRInput ref={this.inputRef} />
+        <button onClick={this.clickHandler}>Click to Focus</button>
+      </div>
+    );
+  }
+}
+
+export default FRParentInput;