Now that our components are ready, we can render them conditionally inside the Login page. We have some test code there. Let's delete everything and start from scratch. We can create a function called LoginPage and export it. Now we need to conditionally render register or Signin page. For that, let's create a state called register. We can keep it false in the beginning. We also need a function called toggleRegister, which will setRegister to be opposite of the current state.

Inside the return statement, we can use Content from antd and give it a classname, log-in. This will work as a wrapper. Now, we can use ternary operator here to render different components. If register is true, we can render the RegisterComponent, and if it's false, we will use the Signin component. You must be asking, how will I change the state? how will I make register to be true? Well, we can pass this function as props to both of these components. Now we will see an error because the components are not expecting this prop. So let's go to the Register component first and add interface Props which will have a function, toggleRegister that will return void. We can destructure it inside the function and call it inside the div below which will call this with an on click event. Let's follow the same for the Sign in component.

client/src/pages/Login.tsx

import { Content } from 'antd/lib/layout/layout';

import { useState } from 'react';

import RegisterComponent from '../components/Register';

import Signin from '../components/Signin';

const LoginPage = () => {

  const [register, setRegister] = useState(false);

  const toggleRegister = () => setRegister(!register);

  return (

    <Content className="log-in">

      {register ? (

        <RegisterComponent toggleRegister={toggleRegister} />

      ) : (

        <Signin toggleRegister={toggleRegister} />

      )}

    </Content>

  );

};

export default LoginPage;

Now we can go to the Navigation component and add the Login navigation, which will take the user to the login page. Since we are here, let's wrap the mobile view navigation with link and home link will go to slash, while Login link will go to slash login.

client/src/components/Navigation.tsx