How to create a common function between multiple components in Reactjs?
<p>I am new to Reactjs. What I wish to do is create a common function between Main.js and SignupForm.js, below are the codes.</p>

<p>Here is my index.html code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

&lt;link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"&gt;
&lt;link rel="stylesheet" href="../assets/css/styles.css"&gt;

&lt;/head&gt;

&lt;body&gt;    
&lt;div id="app"&gt;&lt;/div&gt;
&lt;script src="../assets/js/jquery.min.js"&gt;&lt;/script&gt;

&lt;script src="bundle.js"&gt;&lt;/script&gt;

&lt;/body&gt;  
&lt;/html&gt;
</code></pre>

<p>Here is my Main.js, the main component where the ReactDOM rendering is done:</p>

<pre><code>var React = require('react');
var ReactDom = require('react-dom');
var SignupForm = require('./SignupForm.js');

var Modal = require('react-bootstrap/lib/Modal');

var Main = React.createClass({

getInitialState() {
return { showModal: false};
},

  close() {
this.setState({ showModal: false });
  },

  open() {
this.setState({ showModal: true });
 },

render: function () {
    return (
        &lt;div&gt;
        &lt;button className="btn-block btn btn-lg btn-info" onClick={this.open}&gt; Open &lt;/button&gt;
         &lt;Modal show={this.state.showModal} onHide={this.close} bsSize="small" aria-labelledby="contained-modal-title-sm" enforceFocus &gt;
      &lt;Modal.Header closeButton&gt;
        &lt;Modal.Title className="text-center tb_spacing"&gt;Sign up free to connect with the
right one&lt;/Modal.Title&gt;
        &lt;SignupForm /&gt;

      &lt;/Modal.Header&gt;      
    &lt;/Modal&gt;
        &lt;div&gt;
    );
}
});
ReactDOM.render(&lt;Main/&gt;, document.getElementById('app'));
</code></pre>

<p>And my other component SignupForm.js code is:</p>

<pre><code>var React = require('react');

var SignupForm = React.createClass ({

render : function() {
    return (
  &lt;form id="signup"&gt;

  &lt;div className="form-group" id="formControlsEmail"&gt;
  &lt;label className="control-label"&gt;Email&lt;/label&gt;
  &lt;input type="email" className="form-control" placeholder="Enter email" id="layer_email"/&gt;
&lt;/div&gt;
&lt;div className="form-group" id="formControlsPassword"&gt;
  &lt;label className="control-label"&gt;Password&lt;/label&gt;
  &lt;input type="password" className="form-control" placeholder="Enter password" id="layer_password1"/&gt;
&lt;/div&gt;


&lt;div className="form-group"&gt;
        &lt;label className="control-label"&gt;Gender  &amp;nbsp;&lt;/label&gt;
  &lt;label className="radio-inline" &gt;
  &lt;input type="radio" name="male" /&gt;
    Male
  &lt;/label&gt;
  {' '}
   &lt;label className="radio-inline" &gt;
  &lt;input type="radio" name="female" /&gt;
    Female
  &lt;/label&gt;
  {' '}
&lt;/div&gt;

&lt;button type="submit" className="btn-block btn btn-lg btn-info" onClick={this.close}&gt;
  Next
&lt;/button&gt;

        &lt;/form&gt;
   ) 
  } 
});
module.exports = SignupForm;
</code></pre>

<p>From my SignupForm.js I am trying to execute the function close() which is in Main.js.<br>
 Thank you in advance.</p>