Project 8: Event Invitation

React Engineer

Builds on these lessons

Useid Uselayouteffect Useimperativehandle Usesyncexternalstore Useinsertioneffect

Step 1 of 4

Project

useId for Stable Unique IDs

Call const rsvpId = useId() and use it to link a <label htmlFor={rsvpId}> to its <input id={rsvpId}>. useId generates an ID that's stable across server and client rendering — a hand-written literal id risks colliding if this component ever renders more than once on the same page.

🎯 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 { useId } from "react";

export default function RsvpForm() {
  const rsvpId = useId();

  return (
    <div>
      <label htmlFor={rsvpId}>Will you attend?</label>
      <input id={rsvpId} type="text" />
    </div>
  );
}

← Previous Next →