switching components in view in ReactJS

Question

I am trying to build a signin process using ReactJS and need to render a different component into view once the user clicks on one of the signup options (facebook, twitter, google and a different view for email) based on the response received so the process can move forward. I am rendering the signup view inside the 'signin-container' which is inside a modal dialog and My code is:

class SignIn extends React.Component {

  constructor() {
      super();
      this.state = {showSignin: false};
      this.state = {showSignup: false};
  } 

  openSignin() {
      this.setState({showSignin: true});
  }

  closeSignin() {
      this.setState({showSignin: false});
  }

  openSignup() {
      this.setState({showSignup: true});
  }

  closeSignup() {
      this.setState({showSignup: false});
  }

  render() {
    return(
      <div>
        <Button className="signin-btn" bsStyle='primary' onClick={this.openSignin.bind(this)}>Sign in</Button>
        <Button bsStyle='default' onClick={this.openSignup.bind(this)}>Sign up</Button>

        <ModalDialog heading="Sign in" show={this.state.showSignin}>
          <div className="signin-container">
            <SigninHome />
          </div>
          <Button className="modal-close-button" onClick={this.closeSignin.bind(this)}>
            <i className="fa fa-times"></i>
          </Button>
          <p><a href="#">Signup with Email</a></p>
        </ModalDialog>

        <ModalDialog heading="Sign in" show={this.state.showSignup}>
          <p>Body</p>
          <Button bsStyle='primary' onClick={this.closeSignup.bind(this)}>Close</Button>
        </ModalDialog>
      </div>   
    );
  }
}

class SigninHome extends React.Component {

  render() {
    return(
      <div className="signin-home">
        <Button bsStyle='primary' className="social-signin-btn fb"><i className="fa fa-facebook"></i> Sign in with Facebook</Button>
        <Button bsStyle='primary' className="social-signin-btn twitter"><i className="fa fa-twitter"></i> Sign in with Twitter</Button>
        <Button bsStyle='primary' className="social-signin-btn google"><i className="fa fa-google"></i> Sign in with Google</Button>
      </div>
    );
  }

}

Any ideas on how this can be achieved? Thanks

Is it possible to give an example for this? I am completely new to ReactJS and not a JS pro either. Thanks — hilarl
– hilarl, Commented Aug 31, 2015 at 8:27

Yevgen Safronov · Accepted Answer · 2015-08-31 09:40:32Z

2

Render different layout based on your state. I would suggest moving signingForm into separate React component later on:

class SignIn extends React.Component {

  constructor() {
      super();
      this.state = {showSignin: false};
  } 

  openSignin() {
      this.setState({showSignin: true});
  }

  closeSignin() {
      this.setState({showSignin: false});
  }

  render() {
   var signinDialog = this.state.showSignin ? <ModalDialog heading="Sign in" show={this.state.showSignup}>
              <p>Body</p>
              <Button bsStyle='primary' onClick={this.closeSignup.bind(this)}>Close</Button>
            </ModalDialog> : '';

  return(
      <div>
        <Button className="signin-btn" bsStyle='primary' onClick={this.openSignin.bind(this)}>Sign in</Button>
        <Button bsStyle='default' onClick={this.openSignup.bind(this)}>Sign up</Button>
      </div>
      {signinDialog}
    );
  }
}

answered Aug 31, 2015 at 9:40

Yevgen Safronov

4,0331 gold badge29 silver badges39 bronze badges

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

3 Comments

mfeineis Over a year ago

You shouldn't manipulate the state directly, for binding the initial state use the getInitialState hook.

Yevgen Safronov Over a year ago

@mfeineis when using Babel and ES2015 syntax this.state = {} in constructor is the same as getInitialState hook

mfeineis Over a year ago

Ahh, ok didn't know that - neet :-)

Collectives™ on Stack Overflow

switching components in view in ReactJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related