diff --git a/README.md b/README.md index 2686057..026238b 100644 --- a/README.md +++ b/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) diff --git a/react/focus-an-input-with-useref-hook.md b/react/focus-an-input-with-useref-hook.md new file mode 100644 index 0000000..3a503e3 --- /dev/null +++ b/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 ( +