Moving from one component to another on clicking a button or text-CodePudding

I am new to React. I have two components: Login.js and Signup.js.

From Login.js, I click a button "SignUp" and I want to launch Signup Component as new screen which should take entire area.

import React, { Component } from 'react';
import "../styles.css";
import SignUp from './SignUp';




export default class Login extends Component {

  constructor(props){
    super(props);
    this.state = {errorMessages : {},
              isSubmitted : false,
                isShown : false
              };
    this._onButtonClick = this._onButtonClick.bind(this);
  }
  _onButtonClick() {
    this.setState({isShown : true});
  }

render() {
    const signUp = (
      <div>
        <label>Not Registered Yet? </label>
      <div>
      <button onClick={this._onButtonClick}>Button</button>
    {this.state.isShown ? <SignUp /> :null}
    </div>
    
  </div>  
);



  return (
    <div className="app">
        <div className='image'>
            <img src="/Logo.png" alt="image" />   
        </div>
        <div>{signUp}</div>
      <div className="login-form">
        <div className="title">Sign In</div>
        {this.state.isSubmitted ? <div>User is successfully logged in</div> : renderForm}
      </div>
    </div>
  );
}

Login component UI is displayed using renderForm, which contains simple input fields and Submit button. Also this screen contains SignUp button, clicking on which I want to launch Signup component. Right now, Signup screen [which contains a form with 3 input fields only] gets displayed on top of Login component/screen only.

I want to display SignUp component as new screen, so that Login screen is not visible. How to do it?

Thanks

CodePudding user response：

Navigating between screens is generally done through a router system, such as React Router. You'd set up the routes like:

<Routes>
  <Route path="/" exact element={<Home />} />
  <Route path="/login" element={<Login />} />
  <Route path="/signup" element={<SignUp />} />
</Routes>

You can use Link components as buttons, for example to move to the SignUp component:

<Link to="/signup">Sign Up!</Link>

Alternatively, if this is a very trivial app or learning exercise then you could simply maintain some state in App to track which component is currently active. This state could be used to show/hide components as necessary.

CodePudding user response：

You can implement routing for your application using React Router