CODEWITHSUNDEEP
javascriptreactjs
hilarl
hilarl

Reputation: 6880

switching components in view in ReactJS

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

Upvotes: 0

Views: 3570

Answers (1)

Yevgen Safronov
Yevgen Safronov

Reputation: 4033

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

Upvotes: 2

Related Questions