title: How to submit form from a button outside that component in React?
body: <p>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 using that button.</p>
  
  <p>To make it more clear I have the following:</p>
  
  <pre><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  
  class CustomForm extends Component {
    render() {
      return (
        &lt;form onSubmit={alert('Form submitted!')}&gt;
          &lt;button type='submit'&gt;Inside Custom&lt;/button&gt;
        &lt;/form&gt;
      );
    }
  }
  
  function App() {
    return (
      &lt;div&gt;
        &lt;CustomForm /&gt;
        &lt;button&gt;In Root&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>Now, I can submit the form using the button titled 'Inside Custom', but I also want to be able to submit the form using the button titled 'In Root' that is located in the root component. Is there a way to somehow pass reference from that button to that custom component, and actually submit the form when <code>In Root</code> button is clicked?</p>