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.


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'));
    <Login />



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

export default class Login extends Component {

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

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

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

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?


Answers(2) :

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

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

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