Unable to call react component class from another component class

Question

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;

Okay. so the way I understand it is- my handleClick handler function "calls" ContactInfo when someone clicks on register button. after the call, the ContactInfo class should render relevant form. Right? Any corrections are deeply appreciated! — Gurpreet Sandhu, Oct 29 '16 at 23:09

score 1 · Accepted Answer · answered Oct 30 '16 at 00:41

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

What you should probably do is

Have a parent component that handles which view you're on
Login form and ContactInfo are each their own separate components
Parent keeps track of which form it should be rendering on its state
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();
    }
  }
});

ok so I found I did not set type and id attributes on my button. Its fixed now!! — Gurpreet Sandhu, Oct 30 '16 at 06:17
hahaha I think you deleted your question so then I deleted my response? I dunno. anyway, glad it's working for you now! — Rose Robertson, Oct 30 '16 at 06:19

Unable to call react component class from another component class

1 Answers1