Assignments Of Day 8: Conditional Rendering in React.js
Assignment 1: Basic Conditional Rendering
Task:
Create a React component called WeatherStatus that displays a message based on whether the user is indoors or outdoors.
Step-by-Step Solution:
1. Create a new component WeatherStatus:
jsx
Copy code
import React from 'react';
function WeatherStatus(props) {
if (props.isIndoors) {
return <h2>You're inside. Stay warm!</h2>;
} else {
return <h2>You're outside. Enjoy the sunshine!</h2>;
}
}
export default WeatherStatus;
2. Usage:
jsx
Copy code
<WeatherStatus isIndoors={true} />
Explanation:
- The WeatherStatus component checks if the isIndoors prop is true. If yes, it displays "You're inside. Stay warm!". If false, it displays "You're outside. Enjoy the sunshine!".
- The condition is evaluated inside an if statement.
Assignment 2: Conditional Rendering Using Ternary Operator
Task:
Write a component called AccessControl that shows a message depending on whether the user is logged in or not. Use the ternary operator.
Step-by-Step Solution:
1. Create the AccessControl component:
jsx
Copy code
import React from 'react';
function AccessControl(props) {
return (
<h2>
{props.isLoggedIn ? 'Welcome back!' : 'Please log in.'}
</h2>
);
}
export default AccessControl;
2. Usage:
jsx
Copy code
<AccessControl isLoggedIn={false} />
Explanation:
- The AccessControl component uses the ternary operator to check the isLoggedIn prop. If true, it displays "Welcome back!". If false, it displays "Please log in.".
Assignment 3: Conditional Rendering Using &&
Task:
Create a component Notifications that displays a notification message only if the hasNotifications prop is true. Use the && operator.
Step-by-Step Solution:
1. Create the Notifications component:
jsx
Copy code
import React from 'react';
function Notifications(props) {
return (
<div>
{props.hasNotifications && <p>You have new notifications!</p>}
</div>
);
}
export default Notifications;
2. Usage:
jsx
Copy code
<Notifications hasNotifications={true} />
Explanation:
- The Notifications component uses the && operator. If hasNotifications is true, it renders the message "You have new notifications!". Otherwise, nothing is displayed.
Assignment 4: Returning null for Conditional Rendering
Task:
Create a component ShowProfile that only renders the profile picture if the isProfileVisible prop is true. If false, return null.
Step-by-Step Solution:
1. Create the ShowProfile component:
jsx
Copy code
import React from 'react';
function ShowProfile(props) {
if (!props.isProfileVisible) {
return null;
}
return <img src="profile.jpg" alt="Profile" />;
}
export default ShowProfile;
2. Usage:
jsx
Copy code
<ShowProfile isProfileVisible={false} />
Explanation:
- The ShowProfile component returns null if the isProfileVisible prop is false. If true, it renders the profile image.