An announcement board shows a message with a button that is supposed to replace it with a confirmation when clicked. Clicking Dismiss has no visible effect.
The button responds to clicks but the original message never leaves the screen regardless of how many times it is pressed.
Think about what React checks to decide whether the screen needs to update after an action.
Think about what React checks to decide whether the screen needs to update after an action.
Why this fixes it
The component read `announcement` from a plain variable declared outside any React hook. When `handleDismiss` assigned a new string to it, the assignment succeeded at the JavaScript level but React had no way to detect the change - it only schedules re-renders in response to state or prop updates through its own APIs. Moving `announcement` into `useState` connects the value to React's update cycle so every call to `setAnnouncement` triggers a re-render and the component re-executes with the new value shown on screen.