What are some examples of conditional rendering in React using TypeScript?

What are some examples of conditional rendering in React using TypeScript?

Conditional rendering in React allows you to render different UI elements based on certain conditions. Here are a few examples using TypeScript:

1. Using Ternary Operator:

   const MyComponent: React.FC<{ isLoggedIn: boolean }> = ({ isLoggedIn }) => {
       return (
           <div>
               {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
           </div>
       );
   };
   

2. Using Logical && Operator:

   const MyComponent: React.FC<{ showMessage: boolean }> = ({ showMessage }) => {
       return (
           <div>
               {showMessage && <p>This message is conditionally rendered!</p>}
           </div>
       );
   };
   

3. Using Switch Statement:

   const MyComponent: React.FC<{ status: string }> = ({ status }) => {
       let message;
       switch (status) {
           case 'loading':
               message = <p>Loading...</p>;
               break;
           case 'error':
               message = <p>Error occurred!</p>;
               break;
           default:
               message = <p>Data loaded successfully!</p>;
       }
       return <div>{message}</div>;
   };
   

These examples demonstrate how to use TypeScript with conditional rendering in React.

Can you explain the ternary operator example in more detail?

Sure! The ternary operator is a shorthand for an if-else statement. In the example I provided:

const MyComponent: React.FC<{ isLoggedIn: boolean }> = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
        </div>
    );
};

• isLoggedIn is a boolean prop that determines whether the user is logged in.
• The expression {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>} checks the value of isLoggedIn.
• If isLoggedIn is true, it renders <h1>Welcome back!</h1>; otherwise, it renders <h1>Please log in.</h1>. This allows for a dynamic user experience based on the login state.

What about using the logical && operator?

The logical && operator is another way to conditionally render components in React. Here's the example again:

const MyComponent: React.FC<{ showMessage: boolean }> = ({ showMessage }) => {
    return (
        <div>
            {showMessage && <p>This message is conditionally rendered!</p>}
        </div>
    );
};

In this case:

• showMessage is a boolean prop that determines whether to display the message.
• The expression {showMessage && <p>This message is conditionally rendered!</p>} means that if showMessage is true, the paragraph will be rendered. If showMessage is false, nothing will be rendered in that spot. This is a clean way to conditionally display elements without needing an else case.