Comment Thread Blog Block for React

Nowhere: it is added to the page's own state, shown with the name "You" and "Just now" in place of a date, and gone when the page reloads. The status line under the form says so each time. To make it real, send text to your API in the post handler and add the saved comment to comments when the request succeeds.

Two things: an empty comment ("Write a comment before you post it.") and one shorter than eight characters ("Too short: write at least 8 characters."). The check runs when you press Post comment, not on every keystroke, and the error line sits in the layout from the start (role="alert", a reserved height), so the form does not jump. The field is marked aria-invalid and keeps focus. Change MIN_LENGTH to tune the limit; the field also stops at 600 characters.

Each comment with replies holds one Collapsible, open by default. Its trigger names the action and the count ("Hide 2 replies", then "Show 2 replies") and the chevron turns. While folded the replies are inert, so the keyboard skips them. Replies are one level deep, which keeps a thread readable on a phone; the indent is smaller there.

It is derived from the comments shown: every top-level comment and every reply, so posting one changes "3 comments" to "4 comments" with no number to keep in sync. Dates are fixed ISO strings in the data, formatted in UTC, and never computed from the clock.

Yes. The thread, the indent line and the chevron follow the page direction, the count and the dates are isolated with bdi, and the form fields mirror.