Question 136773 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React to render another component condionally

I’m new to the World of React. I have the following functional component for the login page.

I’d like it to render OtpInput component when user clicks on the Verify Email button and there’s no error i.e. emailError is null.

import { BaseSyntheticEvent, useState } from 'react';
import { Button } from '@fluentui/react-components';
import styles from './Login.module.scss';
import LoginField from '../../core/components/LoginField';
import OtpInput from '../../core/components/multi-factor-authentication/Multi-factor-authentication';

export default function Login(): JSX.Element {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState('');
  // Multi-factor authentication.
  const [otp, setOtp] = useState('');
  const onChangeOtp = (value: string) => setOtp(value);

  const handleVerifyEmail = (): void => {
    if (email) {
      setEmailError('');
    } else if (!email) {
      setEmailError('Please enter your email.');
    }
  };

  const div = (
    <div className={styles.loginContainer}>
      <div className={styles.loginSection}>
        <div className={styles.loginControls}>
          <div className={styles.logoContainer}>
            <div className={styles.logo} />
            <h1 color="secondary">Alytic</h1>
          </div>
          <LoginField
            title="Email"
            required
            size="large"
            onChange={(e: BaseSyntheticEvent) => setEmail(e.target.value)}
            validationState={emailError ? 'error' : undefined}
            validationMessage={emailError}
            label="Email"
          />
          <Button onClick={handleVerifyEmail}>Verify Email</Button>
        </div>
      </div>
      {emailError !== '' ? (
        <div>
          <h1>Enter your code</h1>
          <h3>Enter the 6-digit security code from your authenticator app.</h3>
          <OtpInput value={otp} valueLength={6} onChange={onChangeOtp} />
          <Button appearance="primary" shape="rounded" size="medium">
            Continue
          </Button>
        </div>
      ) : (
        <div>
          <p>Test</p>
        </div>
      )}
      <div className={styles.loginImage} />
    </div>
  );

  return div;
}
Tags:

2

Answers


  1. 0

    The reason is because if the email is good, emailError !== '' will be false. Have a separate state for labelling whether the email is verified. Keep emailError for validation message only.

    import { BaseSyntheticEvent, useState } from "react";
import { Button } from "@fluentui/react-components";
import styles from "./Login.module.scss";
import LoginField from "../../core/components/LoginField";
import OtpInput from "../../core/components/multi-factor-authentication/Multi-factor-authentication";

export default function Login(): JSX.Element {
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState("");
  // Multi-factor authentication.
  const [otp, setOtp] = useState("");
  const onChangeOtp = (value: string) => setOtp(value);
  const [isVerified, setIsVerified] = useState(false);

  const handleVerifyEmail = (): void => {
    if (email) {
      setIsVerified(true);
      setEmailError("");
    } else {
      setEmailError("Please enter your email.");
      setIsVerified(false);
    }
  };

  const div = (
    <div className={styles.loginContainer}>
      <div className={styles.loginSection}>
        <div className={styles.loginControls}>
          <div className={styles.logoContainer}>
            <div className={styles.logo} />
            <h1 color="secondary">Alytic</h1>
          </div>
          <LoginField
            title="Email"
            required
            size="large"
            onChange={(e: BaseSyntheticEvent) => setEmail(e.target.value)}
            validationState={emailError ? "error" : undefined}
            validationMessage={emailError}
            label="Email"
          />
          <Button onClick={handleVerifyEmail}>Verify Email</Button>
        </div>
      </div>
      {isVerified ? (
        <div>
          <h1>Enter your code</h1>
          <h3>Enter the 6-digit security code from your authenticator app.</h3>
          <OtpInput value={otp} valueLength={6} onChange={onChangeOtp} />
          <Button appearance="primary" shape="rounded" size="medium">
            Continue
          </Button>
        </div>
      ) : (
        <div>
          <p>Some Text Here</p>
        </div>
      )}
      <div className={styles.loginImage} />
    </div>
  );

  return div;
}
    Login or Signup to reply.
  2. 0

    You can use Ternary Operator for conditionally rendering a component.

    Define logic for the condition inside a function, then define a boolean variable to hold the status of the condition and use that variable to the check the evaluate the condition before rendering the component.

    checkout the below article to gain more insight on conditional rendering in react
    Conditional Rendering in React

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search