Conditional styling patterns in NextJS - Mini Project: Build & Apply

Conditional styling patterns

📖 Scenario: You are building a simple Next.js app that shows a list of tasks. Each task can be either completed or not. You want to style the tasks differently based on their completion status.

🎯 Goal: Create a Next.js functional component that displays a list of tasks. Use conditional styling to show completed tasks with a green background and incomplete tasks with a red background.

📋 What You'll Learn

Create a list of tasks with exact names and completion status

Add a variable to hold the CSS class names for completed and incomplete tasks

Use conditional styling inside the JSX to apply the correct class based on task completion

Render the list with the correct styles applied

💡 Why This Matters

🌍 Real World

Conditional styling is common in web apps to show different states like completed tasks, errors, or active items clearly to users.

💼 Career

Front-end developers often use conditional styling patterns in React and Next.js to build interactive and accessible user interfaces.

1

Create the tasks data

Create a constant array called tasks with these exact objects: { id: 1, name: 'Buy groceries', completed: true }, { id: 2, name: 'Walk the dog', completed: false }, and { id: 3, name: 'Read a book', completed: true }.

NextJS

# Create the tasks array with the given objects
# Your code here

Need a hint?

Use const tasks = [ ... ] with the exact objects inside.

2

Add CSS class names for styling

Create two constants called completedClass and incompleteClass. Set completedClass to the string 'bg-green-200 p-2 rounded' and incompleteClass to the string 'bg-red-200 p-2 rounded'.

NextJS

const tasks = [
  { id: 1, name: 'Buy groceries', completed: true },
  { id: 2, name: 'Walk the dog', completed: false },
  { id: 3, name: 'Read a book', completed: true }
];

# Create completedClass and incompleteClass constants with the given strings
# Your code here

Need a hint?

Define two constants with the exact class name strings for styling.

3

Use conditional styling in JSX

Create a functional component called TaskList that returns a <ul>. Inside, use tasks.map with task as the iterator. For each <li>, set the className to completedClass if task.completed is true, otherwise incompleteClass. Display task.name inside each <li>. Use task.id as the key.

NextJS

const tasks = [
  { id: 1, name: 'Buy groceries', completed: true },
  { id: 2, name: 'Walk the dog', completed: false },
  { id: 3, name: 'Read a book', completed: true }
];

const completedClass = 'bg-green-200 p-2 rounded';
const incompleteClass = 'bg-red-200 p-2 rounded';

# Create TaskList component with tasks.map and conditional className
# Your code here

Need a hint?

Use a ternary operator inside className to choose the style based on task.completed.

4

Add accessibility and export the component

Add an aria-label attribute with the value 'Task list' to the <ul> element inside the TaskList component. Ensure the component is exported as default.

NextJS

const tasks = [
  { id: 1, name: 'Buy groceries', completed: true },
  { id: 2, name: 'Walk the dog', completed: false },
  { id: 3, name: 'Read a book', completed: true }
];

const completedClass = 'bg-green-200 p-2 rounded';
const incompleteClass = 'bg-red-200 p-2 rounded';

export default function TaskList() {
  return (
    
      {tasks.map(task => (
        
          {task.name}
        
      ))}
    
  );
}

# Add aria-label="Task list" to the  element
# Your code here

Need a hint?

Add aria-label="Task list" inside the <ul> tag for accessibility.