Logical AND rendering in React - Mini Project: Build & Apply

Logical AND Rendering in React

📖 Scenario: You are building a simple React component that shows a special message only when a user is logged in and has notifications.

🎯 Goal: Create a React functional component that uses logical AND rendering to display a notification message only if the user is logged in and has notifications.

📋 What You'll Learn

Create a state variable user with properties isLoggedIn and notifications.

Create a boolean variable hasNotifications that checks if user.notifications array length is greater than zero.

Use logical AND rendering with user.isLoggedIn and hasNotifications to conditionally render a message.

Render a <div> with the message You have new notifications! only when both conditions are true.

💡 Why This Matters

🌍 Real World

Logical AND rendering is common in React apps to show or hide UI elements based on multiple conditions, like user login status and data availability.

💼 Career

Understanding conditional rendering with logical operators is essential for building interactive and user-friendly React applications in professional development.

1

Set up the user state

Create a React functional component called NotificationMessage. Inside it, create a state variable called user using useState with this exact object: { isLoggedIn: true, notifications: ["Message 1", "Message 2"] }.

React

import React, { useState } from 'react';

function NotificationMessage() {
  // Create user state with isLoggedIn and notifications
  // Your code here
}

Need a hint?

Use useState to create user with the exact object given.

2

Create a helper variable for notifications

Inside the NotificationMessage component, create a constant called hasNotifications that is true if user.notifications length is greater than zero, otherwise false.

React

import React, { useState } from 'react';

function NotificationMessage() {
  const [user, setUser] = useState({ isLoggedIn: true, notifications: ["Message 1", "Message 2"] });
  // Create hasNotifications to check if user.notifications length > 0
  // Your code here
}

Need a hint?

Use user.notifications.length > 0 to set hasNotifications.

3

Use logical AND rendering

In the NotificationMessage component, return a <div>. Inside it, use logical AND rendering with user.isLoggedIn and hasNotifications to render the exact text You have new notifications! only when both are true.

React

import React, { useState } from 'react';

function NotificationMessage() {
  const [user, setUser] = useState({ isLoggedIn: true, notifications: ["Message 1", "Message 2"] });
  const hasNotifications = user.notifications.length > 0;
  // Return a div with logical AND rendering for the message
  // Your code here
}

Need a hint?

Use {user.isLoggedIn && hasNotifications && "You have new notifications!"} inside the <div>.

4

Complete the component export

Add export default NotificationMessage; at the end of the file to export the component.

React

import React, { useState } from 'react';

function NotificationMessage() {
  const [user, setUser] = useState({ isLoggedIn: true, notifications: ["Message 1", "Message 2"] });
  const hasNotifications = user.notifications.length > 0;
  return (
    
      {user.isLoggedIn && hasNotifications && "You have new notifications!"}
    
  );
}
// Export the component
// Your code here

Need a hint?

Use export default NotificationMessage; to export the component.