How to submit form from a button outside that component in React?

Question

I have a form in one of my React components, and and in the outside component that calls it I want to pass a reference to a button there, so that I can also submit that usin

Answer 1

You can pass the onSubmit click handler as a props as follows:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class CustomForm extends Component {

  render() {
    return (
      

        Inside Custom
      
    );
  }
}

function App() {
 handleSubmit = () => {
   alert('Form submitted!')
}
  return (
    

      
      In Root
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Passing function as a props to handle form submit makes the CustomForm element more reusable since the business logic for the submit is not part of CustomForm component.