Challenge: Dropdown menu

Write a dropdown that closes on outside click using useRef and state.

Challenge: Dropdown menu

This challenge asks you to write a Dropdown component. A button and a list that shows when open. Closes on outside click.

Combine two hooks: useState for the open state, useRef to detect outside clicks. On button click, toggle with setOpen(o => !o).

For outside click, in useEffect add document.addEventListener("click", ...); if the clicked target is not inside the menu, call setOpen(false). Cleanup removes the listener.

Exercise Write Dropdown

Complete the skeleton. Write a Dropdown component. Create open state and ref = useRef(null). On button click, setOpen(o => !o). In useEffect, add document.addEventListener("click", handler); the handler calls setOpen(false) on outside click. Remove the listener on cleanup. When open is true, show <ul><li>A</li><li>B</li></ul>. Export it.

Show example solution

import { useState, useRef, useEffect } from "react";

function Dropdown() {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);
  return (
    <div ref={ref}>
      <button onClick={() => setOpen((o) => !o)}>Menu</button>
      {open && (
        <ul>
          <li>A</li>
          <li>B</li>
        </ul>
      )}
    </div>
  );
}

export default Dropdown;

Test yourself

How is outside click caught?
- document.addEventListener
- window.alert
- console.log
- useState
Show answer

document.addEventListener — Outside click is caught with document.addEventListener.
Match the dropdown parts

useState

open state
useRef

Outside click
useEffect

Listener
setOpen(false)

Closes

Next lesson: Beginner section exam

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies