In-Place Edit Profile Block for React

Edit START (the name, headline, location, bio, the chosen zone and whether the email shows), ROWS (a label, a hint, the field's length and the sentence a too-short text is refused with), ZONES (a city and its minutes east of UTC) and EMAIL. The initials are worked out from the display name, so changing the name changes them. The local time in the time-zone line is worked out from NOW_UTC, a typed moment, never from the clock: replace it with the time you want to show, or with Intl.DateTimeFormat and a real zone name when you wire it up.

Everything. A change updates this page's state, adds a line to Recent edits and says so in the foot; nothing is sent or stored, and a reload starts again from START. To make it real, call your endpoint in commitField, chooseZone and flipEmail, change the profile only when it answers and put a failure in the same status line. Undo then needs a call of its own, because it puts the earlier profile back.

Press the pencil (or the value) to edit: the text becomes a field with a check and a cross. Enter saves it, Escape or the cross puts the old text back and says "Kept it as it was." Pressing Enter on a name, headline or location with no text keeps the saved one and says why in the foot, and the check is held while the text is too short. Enter in the bio saves it too. Changing the time zone or the switch saves at once, since there is nothing to type.

Each saved change adds a line at the top of Recent edits ("Headline: Staff engineer to Principal engineer"); the list shows the last four and says how many there are. Undo takes the latest edit back, restoring the field it changed, and removes its line; press it again to step further back. It is always on the page, held quiet when there is nothing to undo, so nothing moves when the first edit is made.

Each pencil, check and cross is named for its field ("Edit headline", "Save headline"), every field is linked to its hint or reason, the status line is a polite live region present from the start, and the characters count of the bio is part of the field's description. On a phone each label sits above its value and the foot with the status and Undo stays pinned to the bottom of the screen, with Undo as an icon. Names, places and the email keep their own reading order in a right-to-left page.