🚀 New React Challenge: Invoker modal

Tired of writing useState(false) and onClick handlers every time you need a modal? The browser already has a declarative API for that.

---

🧩 Overview

Learn how to open and close a <dialog> using only HTML attributes — no React state, no useState, no event handlers at all. The Invoker Commands API lets buttons control dialogs natively.

👉 https://www.reactchallenges.com/challenges/invoker-modal

---

✅ Requirements

• Wire the "Contact Us" button to open the dialog using command and commandfor attributes
• Wire the "Close" button to close the dialog
• The dialog must start closed
• Keep the existing form fields and data-testid attributes intact
• Do not remove the TypeScript module augmentation block

---

💡 Notes

• A button uses command and commandfor to tell the browser to call showModal() or close() — no JavaScript needed.
• useId() from React is the idiomatic way to generate a unique id for linking button to dialog.
• The declare module "react" block already adds command and commandfor to React's button types.

---

🧪 Tests

1. Renders the app title
2. Renders the open button with command attributes
3. Matches the button commandfor with the dialog id
4. Dialog does not have the open attribute initially
5. Close button has command close with matching commandfor

This challenge is perfect for developers who want to rely more on the platform and write less JavaScript. You'll learn a native browser API that makes modals simpler, more accessible, and more resilient.

🔥 Start the Challenge Now