Dinner Rating Input Form Block for React

Edit ROWS (each row's key, label and hint) and WORDS, which holds one word per star, so five words means a five-star scale. The overall, its half-star drawing, its word and the "N of 3 scores rated" line all come from the same pure helpers (meanText, halfOf, overallWord), so adding a row needs no other change beyond a field in the Scores type.

It is the mean of the rows rated so far, to one decimal and in whole-number arithmetic, so three scores of 4, 5 and 4 print "4.3". The read-only stars round the mean to the nearest half star. Until all three rows are rated the word says how many it comes from ("Great, from 2 of 3"), and with none rated it reads "Rate a row to start", so the figure never claims more than you gave it.

The arrow keys move the chosen star and Home and End jump to the ends, which is the rating control's own behaviour. A digit from 1 to 5 sets that score directly while focus is on a row's stars: the block takes the key before the control sees it, so it works the same in every version. Each star is named in words ("3 of 5, Good"), and the word chosen is printed beside the row, so the score never depends on colour or on counting stars.

A disabled button gives no reason and drops out of the tab order. Here the button stays pressable: pressing it with a row unrated names the first missing one under the rows, says "Not logged" in the foot and moves focus to that row's first star, so a keyboard user lands where the answer goes. Rating the row clears the message.

Nothing is published or sent: a good press only says "Logged in this demo. Nothing was sent." To make it real, send the three scores and the note from the submit handler, and show the server's answer in the same status line. Keep the overall as a derived value rather than storing it, so it can never disagree with the rows.

Treat each row as a field whose value is a number from 0 to 5, with 0 meaning not rated. With react-hook-form, wrap each Rating in Controller, pass field.value and call field.onChange from the rating's value handler, and validate with a rule that every score is above zero. With TanStack Form, give every row its own field and a validator that returns the same "Rate Service to continue" message.