menu

Questions & Answers

How to move from one component to another on click of a button or text?

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.

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Login from './components/Login';

import reportWebVitals from './reportWebVitals';
import {BrowserRouter, HashRouter} from "react-router-dom" 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <Login />
  </HashRouter>,

);
reportWebVitals();

Login.js:

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

Answers(2) :

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.

You can implement routing for your application using React Router