Unable to call react component class from another component class [duplicate]

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
– Gurpreet Sandhu, Commented Oct 29, 2016 at 23:09

Rose Robertson · Accepted Answer · 2016-10-30 00:41:26Z

1

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();
    }
  }
});

answered Oct 30, 2016 at 0:41

Rose Robertson

1,2567 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gurpreet Sandhu Over a year ago

ok so I found I did not set type and id attributes on my button. Its fixed now!!

Gurpreet Sandhu Over a year ago

I'm sorry I think I accidentally deleted your response.

Rose Robertson Over a year ago

hahaha I think you deleted your question so then I deleted my response? I dunno. 😜 anyway, glad it's working for you now!

Collectives™ on Stack Overflow

Unable to call react component class from another component class [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related