Skip to content

docs(react-form): add form.handleSubmit in form-composition.md subscribe button #1521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

MrGeniusProgrammer
Copy link

the docs does not clearly states that form.handleSubmit must be present in the subscribe button in form composition and will confuse many developers (and I did get confused). So with this it is clearly stated.

@MrGeniusProgrammer MrGeniusProgrammer changed the title Update form-composition.md with form.handleSubmit in the subscribe button docs(react-form): form-composition.md with form.handleSubmit in the subscribe button May 20, 2025
@MrGeniusProgrammer MrGeniusProgrammer changed the title docs(react-form): form-composition.md with form.handleSubmit in the subscribe button docs(react-form): added form.handleSubmit in form-composition.md subscribe button May 20, 2025
@MrGeniusProgrammer MrGeniusProgrammer changed the title docs(react-form): added form.handleSubmit in form-composition.md subscribe button docs(react-form): add form.handleSubmit in form-composition.md subscribe button May 20, 2025
@@ -124,7 +124,7 @@ function SubscribeButton({ label }: { label: string }) {
const form = useFormContext()
return (
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
{(isSubmitting) => <button onClick={() => form.handleSubmit()} disabled={isSubmitting}>{label}</button>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button is called SubscribeButton which doesn't really explain the purpose it's used for in the example (it being a SubmitButton)

I think it would be good to rename the ccomponent to be a SubmitButton instead.
So since it's meant to be a Submit button based on the label and usage, how about making it a submit button?

Suggested change
{(isSubmitting) => <button onClick={() => form.handleSubmit()} disabled={isSubmitting}>{label}</button>}
{(isSubmitting) => <button type="submit" disabled={isSubmitting}>{label}</button>}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants