@elaineleung
Posted
Hi Jake, about your question, I think most of the solutions I've seen here use the method of display:none. It's a workable method for a lightweight component like this; the only thing I don't like about it you can still see the hidden element in the inspector. In my solution, I chose to use JS to overwrite the node contents; that way the user won't see the thank you part at all in the DOM inspector before they submit. I like @bunee's suggestion of using a template tag, and I think that's a much better option than display:none.
In the real world, I think it all depends on the UI of the rating component and how the frontend was built. If the rating was done on a page, then yes, most likely the user would be directed to the next page after the POST request is made. If it's a modal like this (I'm assuming this would be a popup modal in implementation since it looks like one), then probably just the contents of the modal would be changed after submission. If this was built on a library like React, then most likely the component or page would be rerendered with new content after submission.
By the way, a quick comment on your component (which was well done by the way!): I'd suggest that instead of using a set default score of 1, I'd have the component in an empty state so that if the user accidentally hit the submit button before choosing the score, they won't be forced to select a score they didn't mean to choose. What I'd do is, I'd write some logic to prevent the user going to the next page before selecting a score, like "if there's a score selected, then do this".
Hope some of this was helpful!
Marked as helpful
