Gurpreet singh Gurpreet singh - 1 month ago 9
React JSX Question

Unable to call react component class from another component class

I am new to reactjs and javascript. I am trying to create a very basic login and registration form. When a client enters email and password, and clicks 'register', the form should take him to next form- which is Contact Information form. But my page refreshes and brings me back to original screen instead of contact information screen. Here's the code for login and contact info-

import React from 'react';
import {render} from 'react-dom';
import { ContactInfo } from './ContactInfo.jsx'

var App = React.createClass ({
handleClick: function(){
<ContactInfo new="new"/>;
},
render: function() {
return (<div>
<h1>Login</h1>

<form>
Email: <input type="text" name="email" method="get" />
<br />
<br />
Password: <input type="password" name="pwd" />
<br />
<a href=""><i>forgot password?</i></a>
<br /><br />
<button>Login</button>
<button onClick={this.handleClick}>Register</button>
</form>
</div>);
}
});

render(<App />, document.getElementById('app'));


and Contact Info:

import React from 'react';

var ContactInfo = React.createClass({

render: function(){
return(
<div>
<form>
Name: <input type="text"/>
<br />
<br />
Phone: <input type="text"/>
<br />
Address:
Street <input type = "text" />
<br />
City <input type = "text" />
<br />
State <input type = "text" /><p> </p>zip <input type = "text" />
<br />
Country <input type = "text" />
<br /><br />
<button>Continue</button>
</form>
</div>);
}

});

export default ContactInfo;

Answer

Your handleClick method isn't behaving properly. right now it contains some jsx which is doing absolutely nothing.

What you should probably do is

  1. Have a parent component that handles which view you're on
  2. Login form and ContactInfo are each their own separate components
  3. Parent keeps track of which form it should be rendering on its state
  4. onClick should be updating that state, which will then cause the parent to re-render and update which form it is rendering

Sooooo

Something like this

React.createClass ({
  getInitialState: function () {
    return {
      currentForm: "login"
    };
  },

  handleLoginFormClick: function () {
    this.setState({currentForm: "contact"});
  },

  renderLoginForm: function () { 
    return (
      <LoginForm onClick={this.handleLoginFormClick} />
    );
  },

  renderContactForm: function () { 
    return (
      <ContactForm />
    );
  },
  render: function () {
    switch (this.state.currentForm) {
      case "login":
        return this.renderLoginForm();
      case "contact":
        return this.renderContactForm();
    }
  }
});