Retrieve method in Router 6 with useFetcher Form

Programming
, ,
1

I’m trying to call the submit method of fetcher in the handlerLogin callback. The action specified in fetcher.Form is being accessed correctly, however I’m unable to access the method of fetcher.Form, which is POST. How can I access the method of fetcher.Form inside handlerLogin?

const fetcher = useFetcher()

const handlerLogin = useCallback(async () => {
  console.log(fetcher.formMethod) //-> outputting undefined
  fetcher.submit({ value: 'social' }, { method: fetcher.formMethod })
},[])
    
return (
  <Card className={styles.loginCard}>
    <fetcher.Form method='POST' action='/'>
      ..............
2

To access the method of fetcher.Form inside the handlerLogin function, you can modify the code as follows:

const fetcher = useFetcher()

const handlerLogin = useCallback(async () => {
  console.log(fetcher.Form.method)
  fetcher.submit({ value: 'social' }, { method: fetcher.Form.method })
}, [])
    
return (
  <Card className={styles.loginCard}>
    <fetcher.Form method='POST' action='/'>
      ..............

By using fetcher.Form.method, you can access the method property of the fetcher.Form object.