Built with

Ex. 10 - Autofocus

Instructions

We will make sure that the search field is focused automatically. We could use the autofocus attribute but it would be uncontrolled 😬.

Modify SearchInput to support ref and ref.current.focus()
Use useRef and useEffect to make the field automatically focused in App

Expected result

The field is focus automatically when the application starts.

Help

How should I forward the reference?

xxxxxxxxxx
 
import React, { forwardRef, useRef, useImperativeHandle } from 'react'
​
export default forwardRef(function MyInput(props, ref) {
  const inputRef = useRef()
​
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus()
    },
  }))
​
  return <input ref={inputRef} {...props} />
})

How should I use a reference?

xxxxxxxxxx
 
function Example() {
  const inputRef = useRef()
​
  useEffect(() => {
    inputRef.current.focus()
  }, [])
​
  return <input ref={inputRef} />