Project 5: Team Members Grid

React Engineer

Builds on these lessons

Step 1 of 3

Project

useRef for a DOM Reference

Create const searchInputRef = useRef(null), attach it to an <input ref={searchInputRef}>, and a button that calls searchInputRef.current.focus(). Unlike state, updating a ref never triggers a re-render — it's for reaching a DOM node directly, or holding a value across renders that the UI doesn't depend on.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useRef } from "react";

export default function TeamGrid() {
  const searchInputRef = useRef(null);

  return (
    <div>
      <input ref={searchInputRef} placeholder="Search team..." />
      <button onClick={() => searchInputRef.current.focus()}>Focus Search</button>
    </div>
  );
}

← Previous Next →