Lecture Notes Of Day 8: Conditional
Rendering in React.js
Objective:
Learn how to render
components conditionally based on state or props.
Outcome:
Understand how to
implement conditional rendering using:
- if
conditions
- Ternary
operators
- &&
(Logical AND)
What is Conditional
Rendering?
Conditional rendering in
React refers to displaying a component or element based on certain conditions.
This helps create dynamic and interactive user interfaces that respond to
different states, props, or other conditions in the application.
Methods of Conditional
Rendering
1.
Using if Statements:
You can use JavaScript's if
statement to control the rendering of JSX. The if block can be used inside the
render function or in a return statement.
jsx
Copy code
function Greeting(props)
{
if (props.isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign up.</h1>;
}
}
// Usage
<Greeting isLoggedIn={true}
/>
In this example, if isLoggedIn
is true, the message "Welcome back!" will be displayed; otherwise,
"Please sign up" will appear.
2.
Using Ternary Operator:
The ternary operator is a
shorter version of the if-else statement and is often used in JSX for inline
conditional rendering.
jsx
Copy code
function Greeting(props)
{
return (
<h1>
{props.isLoggedIn ? 'Welcome back!' :
'Please sign up.'}
</h1>
);
}
// Usage
<Greeting isLoggedIn={false}
/>
The ternary operator
evaluates props.isLoggedIn:
o If
true, "Welcome back!" is shown.
o If
false, "Please sign up" is shown.
3.
Using Logical &&:
The && (logical
AND) operator can be used to render a component or element only when a
condition is true. If the condition is false, nothing will be rendered.
jsx
Copy code
function Notification(props)
{
return (
<div>
{props.hasUnreadMessages && <p>You
have new messages!</p>}
</div>
);
}
// Usage
<Notification
hasUnreadMessages={true} />
In this case, if props.hasUnreadMessages
is true, the message "You have new messages!" will be displayed. If false,
nothing will be shown.
4.
Returning null:
If you want to prevent
rendering anything based on a condition, you can return null.
jsx
Copy code
function WelcomeMessage(props)
{
if (!props.showMessage) {
return null;
}
return <h1>Welcome to the site!</h1>;
}
// Usage
<WelcomeMessage
showMessage={false} />
Here, the component
renders nothing (null) when props.showMessage is false.
Practice Examples:
1.
Example 1: Conditional Rendering
Using if
jsx
Copy code
function UserStatus(props)
{
if (props.isOnline) {
return <h2>You are online!</h2>;
}
return <h2>You are offline.</h2>;
}
// Usage
<UserStatus isOnline={true}
/>
2.
Example 2: Conditional Rendering
Using Ternary Operator
jsx
Copy code
function UserStatus(props)
{
return (
<h2>
{props.isOnline ? 'You are online!' :
'You are offline.'}
</h2>
);
}
// Usage
<UserStatus isOnline={false}
/>
3.
Example 3: Conditional Rendering
Using &&
jsx
Copy code
function UserProfile(props)
{
return (
<div>
{props.isAdmin && <button>Delete
User</button>}
</div>
);
}
// Usage
<UserProfile isAdmin={true}
/>
Key Points to Remember:
- if
statements are useful for more complex
conditions or when you want to handle multiple conditions, but they can't
be directly used inside JSX.
- Ternary
operators are concise and great for simple
conditions within JSX.
- &&
operator is handy when you want to render an
element only if the condition is true.
Exercise:
1.
Create a React component LoginPage that
renders a login button if the user is not logged in, and a logout button if
they are logged in.
o Use
if statement, ternary operator, and && in your implementation.
With these methods, you can efficiently handle different scenarios and render elements conditionally in your React applications.