Full Write Form Reviews Block for React

No. A valid form turns into a thanks that says "Nothing was sent in this demo" and repeats what you wrote; "Write another review" brings back an empty form. To keep reviews, post draft to your own endpoint where submit says so, and show the thanks when it answers.

Nothing is read or uploaded. The drop zone accepts up to three images of 5 MB each and lists only their names and sizes, each with a remove button; no thumbnail is drawn. A file that is not an image, is too big or would be a fourth is refused with a line saying which file and why. To store photos, send the File objects in draft.photos yourself and check them again on your server.

Four things are required: a rating, a title, a text of 25 words or more, and an answer to "Would you recommend it". CHECKS lists them and isDone says whether each is met, so the progress bar, the count ("3 of 4 done"), the ticks and the advice line ("Next: a title.") all come from the same draft. Pros, cons and photos are optional and do not count.

On submit, each problem appears in a slot under its field (the slot is always there, so nothing jumps), the field is marked invalid, and focus goes to the first problem in reading order: the first star, the title, the text or the first choice. Editing a field clears its message. The error text is in the text colour with a red icon, never red text alone.

Each is a tag input: type a short phrase and press Enter (or paste a comma-separated list) to add it, and use its X to remove one. Up to four each; when a list is full its input says "That's plenty". The typed text is controlled so the field empties after each tag.

The form is one column. The checklist leaves the layout and its progress line appears above the Post review button, with the same count and the same advice. Nothing scrolls sideways at 320 pixels.