3 ms·
Not defending this particular library, but there are some good reasons to use React abstractions even for simple things like a button. Some examples: * If the
by lobster_johnson 11y ago
Not defending this particular library, but there are some good reasons to use React abstractions even for simple things like a button. Some examples:
* If the form deals with state and validation, then <Button> (as opposed to <button>) can automatically disable itself if the form's input isn't valid.
* It can incorporate useful features like preventing redundant clicks (to prevent duplicate submits) and showing submit progress (eg., replace button label with a spinner while it's pending).
* You can more easily add features that you would have to manually wire with an HTML <button>: For example, let it take a "tooltip" prop that will automatically show a tooltip on hover.
As an aside, I should add that I wouldn't code up a "form with submit and cancel" like this. I would have the form component itself render the submit and cancel buttons, and call it something like SubmittableForm. This way, it can be in control of the UI (eg., validation, button placement, etc.) and submit logic.
As for that htmlFor thing, I don't know why this library does it that way. There's no reason it couldn't correctly wire up a "for" attribute itself on the HTML label element.
- afshin 11y agoJust a guess, but it might be that because "for" is a JS restricted word, they picked an attribute name that wouldn't maybe trip up a syntax highlighter or something of that nature.
- lobster_johnson 11y agoThat's not what I was referring to. There shouldn't be any reason for the FormField component to need to know the name of what the label is referring to, since it has access to its children through the "children" prop.