CODEWITHSUNDEEP
javascriptreactjs
Jayesh Nayak
Jayesh Nayak

Reputation: 159

How to create a common function between multiple components in Reactjs?

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.

Here is my index.html code:

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

<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/styles.css">

</head>

<body>    
<div id="app"></div>
<script src="../assets/js/jquery.min.js"></script>

<script src="bundle.js"></script>

</body>  
</html>

Here is my Main.js, the main component where the ReactDOM rendering is done:

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 (
        <div>
        <button className="btn-block btn btn-lg btn-info" onClick={this.open}> Open </button>
         <Modal show={this.state.showModal} onHide={this.close} bsSize="small" aria-labelledby="contained-modal-title-sm" enforceFocus >
      <Modal.Header closeButton>
        <Modal.Title className="text-center tb_spacing">Sign up free to connect with the
right one</Modal.Title>
        <SignupForm />

      </Modal.Header>      
    </Modal>
        <div>
    );
}
});
ReactDOM.render(<Main/>, document.getElementById('app'));

And my other component SignupForm.js code is:

var React = require('react');

var SignupForm = React.createClass ({

render : function() {
    return (
  <form id="signup">

  <div className="form-group" id="formControlsEmail">
  <label className="control-label">Email</label>
  <input type="email" className="form-control" placeholder="Enter email" id="layer_email"/>
</div>
<div className="form-group" id="formControlsPassword">
  <label className="control-label">Password</label>
  <input type="password" className="form-control" placeholder="Enter password" id="layer_password1"/>
</div>


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

<button type="submit" className="btn-block btn btn-lg btn-info" onClick={this.close}>
  Next
</button>

        </form>
   ) 
  } 
});
module.exports = SignupForm;

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

Upvotes: 2

Views: 1687

Answers (1)

Gilad Artzi
Gilad Artzi

Reputation: 3084

In your Main.js, you can pass the close method as a prop to the SignUpForm

<SignupForm close={this.close} />

And then in SignupForm, you can use onClick={this.props.close}

EDIT:

Although the above solution will work, it will make the SignupForm component not-very-reusable. I suggest you would insert the Modal JSX code into the SignupForm component, and it should control it's own state. If you want to open it from outside, it should be a prop on the element, something like <SignupForm isOpen={isOpen}>.

Upvotes: 1

Related Questions