Form-SubmitButton-UseStore
const form = useFormContext();
const [isSubmitting, canSubmit] = useStore(form.store, (state) => [
state.isSubmitting,
state.canSubmit,
]);
return (
<ActionButton
type={type}
disabled={isSubmitting disabled}
className={className}
isLoading={isSubmitting || isLoading}
{...props}
>
{children}
</ActionButton> The Balastrong YouTube video recommends one way, but the documentation follows another way of creating a button component. Which one is better? Can I use the useStore hook inside the Button component? function SubscribeButton({ label }: { label: string }) {
const form = useFormContext()
return (
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
</form.Subscribe>
)
}
const [isSubmitting, canSubmit] = useStore(form.store, (state) => [
state.isSubmitting,
state.canSubmit,
]);
return (
<ActionButton
type={type}
disabled={isSubmitting disabled}
className={className}
isLoading={isSubmitting || isLoading}
{...props}
>
{children}
</ActionButton> The Balastrong YouTube video recommends one way, but the documentation follows another way of creating a button component. Which one is better? Can I use the useStore hook inside the Button component? function SubscribeButton({ label }: { label: string }) {
const form = useFormContext()
return (
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => <button disabled={isSubmitting}>{label}</button>}
</form.Subscribe>
)
}
