Add Focus An Input With useRef Hook as a react til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_918 TILs and counting..._
+_919 TILs and counting..._
 
 ---
 
@@ -626,6 +626,7 @@ _918 TILs and counting..._
 - [Dynamically Add Props To A Child Component](react/dynamically-add-props-to-a-child-component.md)
 - [Dynamically Create HTML Elements](react/dynamically-create-html-elements.md)
 - [Enforce Specific Values With PropTypes](react/enforce-specific-values-with-proptypes.md)
+- [Focus An Input With useRef Hook](react/focus-an-input-with-useref-hook.md)
 - [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
 - [Forcing A Child Remount With The Key Prop](react/forcing-a-child-remount-with-the-key-prop.md)
 - [Formik Connected Components](react/formik-connected-components.md)

react/focus-an-input-with-useref-hook.md

@@ -0,0 +1,36 @@
+# Focus An Input With useRef Hook
+
+You can send focus to an input by calling
+[`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus)
+on it. To do this in a React context, you need to have a reference to the
+underlying DOM node. You can get this reference with the [`useRef`
+hook](https://reactjs.org/docs/hooks-reference.html#useref).
+
+```jsx
+import React, { useRef } from 'react';
+
+const MyComponent = () => {
+  const inputRef = useRef(null);
+
+  const focusInput = () => {
+    inputRef.current.focus();
+  }
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        type="text"
+        value=""
+        {...otherProps}
+      />
+      <button onClick={focusInput}>Edit Input</button>
+    </div>
+  );
+}
+```
+
+When this component mounts, the underlying `<input>` element will get tied to
+`inputRef`. The `focusInput` handler that I've created can be used to send
+focus to the corresponding `inputRef`. To demonstrate, I've passed it to the
+`onClick` handler of the button. Clicking the button will focus the input.