Trigger Form Submission from inside React useEffect hook?

Question

In my React component, I need to listen for a value to change then trigger a form to be submitted.

Currently I'm using a useEffect hook to listen for changes to a state variable mediaBlob,

import { useEffect, useState } from "react";

export function Foo({
  handleSubmit,
  ...props
}) {

  let { mediaBlob, setMediaBlob } = useState(null)

  useEffect(() => {
    if (mediaBlob) {
      // how to trigger the form submission here?
      // Cant call the form's handleSubmit() method without an event
    }
  }, [mediaBlob]);

but I cant call the form's handleSubmit function because the function needs to accept an event object e.

async function handleSubmit(e) {
  e.preventDefault()
  // ...
}


return (
  <form onSubmit={handleSubmit}>
    <Foo handleSubmit={handleSubmit} />
  </form>
)

Is it still possible to trigger the form submission from within the useEffect hook?

how does mediaBlob get changed?

Ben Wong
– Ben Wong

2023-02-03 06:01:23 +00:00
Commented Feb 3, 2023 at 6:01 — Ben Wong
– Ben Wong, Commented Feb 3, 2023 at 6:01

Mayank Kumar Chaudhari · Accepted Answer · 2023-02-03 06:03:51Z

1

Extract code after e.preventDefault() into another function and call that from useEffect. In case you need to get form Data from the event, you also need to use ref to get reference to form element and extract needed data. You can also use controlled inputs.

answered Feb 3, 2023 at 6:03

Mayank Kumar Chaudhari

19.3k14 gold badges74 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danyal Malik · Accepted Answer · 2023-02-03 07:02:26Z

1

Yes, It's possible to trigger form submission form within useEffect using useRef here is sample code:

import { useEffect, useState, useRef } from "react";

export function Foo({
  handleSubmit,
  ...props
}) {
  const { mediaBlob, setMediaBlob } = useState(null)
  const ref = useRef(null);

  useEffect(() => {
    if (mediaBlob) {
      ref.current.submit();
    }
  }, [mediaBlob]);

  return (
    <form onSubmit={handleSubmit} ref={ref}>
      {/* form content */}
    </form>
  )
}

return (
  <form onSubmit={handleSubmit}>
    <Foo handleSubmit={handleSubmit} />
  </form>
)

answered Feb 3, 2023 at 7:02

Danyal Malik

493 bronze badges

Collectives™ on Stack Overflow

Trigger Form Submission from inside React useEffect hook?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related