Why conditional rendering is needed in React - See It in Action

Why Conditional Rendering is Needed in React

📖 Scenario: Imagine you are building a simple React app that shows a welcome message only when a user is logged in. If the user is not logged in, the app should show a login prompt instead. This is a common real-world situation where you want to show different things on the screen based on some condition.

🎯 Goal: Build a React component that uses conditional rendering to show either a welcome message or a login prompt depending on whether the user is logged in.

📋 What You'll Learn

Create a state variable to track if the user is logged in

Create a configuration variable for the welcome message

Use conditional rendering to show the welcome message only when the user is logged in

Show a login prompt when the user is not logged in

💡 Why This Matters

🌍 Real World

Conditional rendering is essential in React apps to show or hide parts of the UI based on user actions or data, like login status, permissions, or feature flags.

💼 Career

Understanding conditional rendering is a fundamental skill for React developers, enabling them to build dynamic and responsive user interfaces.

1

DATA SETUP: Create a state variable for login status

In a React functional component, create a state variable called isLoggedIn using useState and set its initial value to false.

React

import React, { useState } from 'react';

export default function WelcomeApp() {
  // Create state variable isLoggedIn with initial value false
  // Your code here
}

Hint

Use const [isLoggedIn, setIsLoggedIn] = useState(false); inside the component.

2

CONFIGURATION: Add a welcome message variable

Inside the WelcomeApp component, create a constant called welcomeMessage and set it to the string 'Welcome back, user!'.

React

import React, { useState } from 'react';

export default function WelcomeApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  // Create welcomeMessage constant with value 'Welcome back, user!'
  // Your code here
}

Hint

Use const welcomeMessage = 'Welcome back, user!'; inside the component.

3

CORE LOGIC: Use conditional rendering to show messages

Inside the WelcomeApp component, return JSX that uses a conditional expression with isLoggedIn to show a <h1> with welcomeMessage if isLoggedIn is true, or a <p> with the text 'Please log in.' if false.

React

import React, { useState } from 'react';

export default function WelcomeApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const welcomeMessage = 'Welcome back, user!';

  // Return JSX with conditional rendering using isLoggedIn
  // Your code here
}

Hint

Use a ternary operator inside JSX: {isLoggedIn ? <h1>{welcomeMessage}</h1> : <p>Please log in.</p>}

4

COMPLETION: Add a button to toggle login status

Add a <button> inside the returned JSX that toggles isLoggedIn between true and false when clicked. The button text should be 'Log out' if isLoggedIn is true, or 'Log in' if false.

React

import React, { useState } from 'react';

export default function WelcomeApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const welcomeMessage = 'Welcome back, user!';

  return (
    
      {isLoggedIn ? {welcomeMessage} : Please log in.}
      {/* Add a button to toggle isLoggedIn here */}
      // Your code here
    
  );
}

Hint

Add a button with an onClick handler that calls setIsLoggedIn(!isLoggedIn) and shows text based on isLoggedIn.

Practice

1. Why do we need conditional rendering in React applications?

easy

A. To show or hide parts of the UI based on app state or user actions

B. To make the app load faster by skipping components

C. To style components with CSS dynamically

D. To automatically fix bugs in the code

Solution

1. Step 1: Understand the purpose of conditional rendering

   Conditional rendering lets React show or hide UI parts depending on conditions like user input or app state.

2. Step 2: Compare options with this purpose

   Only To show or hide parts of the UI based on app state or user actions correctly describes this purpose. Other options describe unrelated features.

3. Final Answer:

   To show or hide parts of the UI based on app state or user actions -> Option A

4. Quick Check:

   Conditional rendering = show/hide UI [OK]

Hint: Conditional rendering controls UI visibility based on conditions [OK]

Common Mistakes:

• Confusing conditional rendering with styling
• Thinking it improves app speed directly
• Believing it fixes code errors automatically

2. Which of the following is the correct syntax for conditional rendering using the && operator in React?

easy

A. {condition && <Component />}

B. {condition && &<Component />}

C. {condition ? <Component /> : null}

D. {condition ? <Component />}

Solution

1. Step 1: Review correct syntax for && conditional rendering

   In React, {condition && <Component />} renders the component only if condition is true.

2. Step 2: Check each option for syntax correctness

   {condition && <Component />} matches the correct syntax exactly. {condition && &<Component />} has an extra & symbol. {condition ? <Component /> : null} uses ternary, which is correct but not && syntax. {condition ? <Component />} is incomplete ternary syntax.

3. Final Answer:

   {condition && <Component />} -> Option A

4. Quick Check:

   Correct && syntax = {condition && <Component />} [OK]

Hint: && renders component only if condition is true [OK]

Common Mistakes:

• Adding extra symbols like & accidentally
• Using incomplete ternary syntax
• Confusing ternary and && syntax

3. What will be the output of this React component?

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

When isLoggedIn is false?

medium

A. Welcome back!

B. Please sign in.

C. Nothing is rendered

D. Syntax error

Solution

1. Step 1: Understand the ternary condition in the component

   The component uses isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>. If isLoggedIn is true, it shows "Welcome back!"; otherwise, it shows "Please sign in."

2. Step 2: Apply the given value false to the condition

   Since isLoggedIn is false, the component renders the second part: <h1>Please sign in.</h1>.

3. Final Answer:

   <h1>Please sign in.</h1> -> Option B

4. Quick Check:

   False condition shows else part [OK]

Hint: Ternary shows first if true, else second [OK]

Common Mistakes:

• Mixing true and false branches
• Thinking nothing renders on false
• Confusing syntax causing errors

4. Identify the error in this React code snippet for conditional rendering:

function ShowMessage({ show }) {
  return (
    <div>
      {show ? <p>Hello!</p>}
    </div>
  );
}

medium

A. No error, code is correct

B. Using && operator incorrectly

C. Missing else part in ternary operator

D. Ternary operator missing colon and else expression

Solution

1. Step 1: Analyze the ternary operator usage

   The code uses {show ? <p>Hello!</p>} which is incomplete because ternary requires both true and false parts separated by a colon.

2. Step 2: Identify correct ternary syntax

   The correct syntax is {show ? <p>Hello!</p> : null} or another expression after colon.

3. Final Answer:

   Ternary operator missing colon and else expression -> Option D

4. Quick Check:

   Ternary needs both parts separated by colon [OK]

Hint: Ternary must have ? and : parts [OK]

Common Mistakes:

• Omitting the else part in ternary
• Confusing ternary with && operator
• Assuming code runs without errors

5. You want to display a special message only if a user is logged in and has admin rights. Which conditional rendering approach is best in React?

hard

A. {isAdmin ? <AdminMessage /> : null}

B. {isLoggedIn ? <AdminMessage /> : <LoginPrompt />}

C. {isLoggedIn && isAdmin && <AdminMessage />}

D. {isLoggedIn || isAdmin ? <AdminMessage /> : null}

Solution

1. Step 1: Understand the condition requirements

   The message should show only if both isLoggedIn and isAdmin are true.

2. Step 2: Evaluate each option's logic

   {isLoggedIn && isAdmin && <AdminMessage />} uses isLoggedIn && isAdmin && <AdminMessage />, which renders the message only if both are true. {isLoggedIn ? <AdminMessage /> : <LoginPrompt />} shows message if logged in regardless of admin. {isAdmin ? <AdminMessage /> : null} ignores logged-in status. {isLoggedIn || isAdmin ? <AdminMessage /> : null} uses OR, showing message if either is true, which is incorrect.

3. Final Answer:

   {isLoggedIn && isAdmin && <AdminMessage />} -> Option C

4. Quick Check:

   Use && to require all conditions true [OK]

Hint: Use && to require all conditions true before rendering [OK]

Common Mistakes:

• Using || instead of && for all conditions
• Ignoring one condition in rendering
• Using ternary without else when needed