How to trigger a submit function from Custom Component

Question

I am trying to trigger the form submit function from custom component.
In general my goal is to trigger a boolean state value which is a part of form, and even though the custom component is imported inside the form, somehow it doesn't work.
Problem is about sendEmail function which comes from Custom Component

Here is the codesandbox link and code example below.

Custom Component

import React from "react";

const CustomComponent = (props) => {
  return (
    <div>
      <button onClick={props.sendEmail} type="submit">
        send email
      </button>
    </div>
  );
};

export default CustomComponent;

App.js

import { useState } from "react";
import CustomComp from "./CustomComp";

export default function App() {
  const [isDone, setIsDone] = useState(false);
  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsDone(true);
    console.log("inputText", inputText);
  };

  console.log(isDone);

  const sendEmail = () => { // this doesn't work
    handleSubmit();
    console.log("isDone", isDone);
  };

  const onChangeHandler = (e) => {
    setInputText(e.target.value);
  };

  return (
    <form>
      <h1>Hello CodeSandbox</h1>
      <input type="text" onChange={onChangeHandler} value={inputText} />
      <CustomComp sendEmail={sendEmail} />
      <button onClick={handleSubmit} type="submit">
        submit
      </button>
    </form>
  );
}

Any help will be appreciated

You call handleSubmit() which means that e will be undefined. So e.preventDefault() causes a crash. I'm confused on what your goal is and why you have more than one submit button but you can eliminate the crash by moving the form submit logic into another function and calling that instead of calling handleSubmit with no arguments — Spikatrix
– Spikatrix, Commented Nov 24, 2022 at 10:29
Can you explain a little bit about "somehow it doesn't work". What isn't working how you expect it to? Are you getting logs that you don't expect, behavior that you don't understand, etc...? — Nick Parsons
– Nick Parsons, Commented Nov 24, 2022 at 10:36

Oyyou · Accepted Answer · 2022-11-24 10:29:25Z

1

The first problem you have is you're calling handleSubmit in the sendEmail without passing through 'e'

I'd change to this:

const sendEmail = (e) => {
  handleSubmit(e);
  console.log("isDone", isDone);
};

After doing this, you'll notice your isDone isn't showing what you'd expect. This is because when you're changing the state via handleSubmit, it won't change within this call. You shouldn't worry about logging it as you have. It'll only be an issue if you need to do something with the isDone value

answered Nov 24, 2022 at 10:29

Oyyou

6176 silver badges16 bronze badges

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

Comments

0stone0 · Accepted Answer · 2022-11-24 10:32:20Z

1

There is no event passed when you trigger it from the custom component so event.preventDefault() will result in an error.

Add the event to sendMail, and pass it to handleSubmit. The onClick will automatically pass the event as first param:

const handleSubmit = (event) => {
    event.preventDefault();
    setIsDone(true);
    console.log("inputText", inputText);
};

const sendEmail = (event) => {
    handleSubmit(event);
    console.log("isDone", isDone);
};

Updated CodeSandbox

answered Nov 24, 2022 at 10:32

0stone0

45.5k6 gold badges54 silver badges82 bronze badges

1 Comment

FD3 Over a year ago

Thanks for the answer. There is one more thing i encountered, that in custom component setting button type as "submit" is mandatory to make it work. Is it because it is a part of form?

Collectives™ on Stack Overflow

How to trigger a submit function from Custom Component

2 Answers 2

Comments

Updated CodeSandbox

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related