Lists, Keys, and Conditionals

Lab Overview

In this lab, you will create a Task Management application that demonstrates dynamic list rendering, proper key usage, and conditional rendering. You will practice creating TypeScript React components that handle lists of data, implement filtering, and show different states based on task properties. This lab focuses on list rendering, key management, conditional rendering, and component composition using React and TypeScript.

Workplace Context

Imagine you are a frontend developer working on a task management system. Your team needs a component that can display a list of tasks, filter them by status, and show different visual states based on task properties. The component should be reusable, type-safe, and handle various task states efficiently.

This lab will help you practice building components that work with dynamic data and implement proper React patterns for list rendering.

Objectives

By the end of this lab, you will:

1. Create components that render lists of data with proper key management.
2. Implement filtering and sorting of list items.
3. Use conditional rendering to show different states based on item properties.
4. Apply TypeScript interfaces for type safety.
5. Implement proper component composition and prop handling.

Instructions

Setup the Project

1. Create a new React TypeScript project using Vite:

npm create vite@latest task-manager -- --template react-ts
cd task-manager
npm install

2. Create the following folder structure:

src/
  components/
    TaskList/
      TaskList.tsx
    TaskItem/
      TaskItem.tsx
    TaskFilter/
      TaskFilter.tsx
  types/
    index.ts

Component Requirements

1. TaskList Component

Create a TaskList component that manages and displays a list of tasks.

// types/index.ts
export type TaskStatus = 'pending' | 'in-progress' | 'completed';
 
export interface Task {
  id: string;
  title: string;
  description: string;
  status: TaskStatus;
  priority: 'low' | 'medium' | 'high';
  dueDate: string;
}
 
export interface TaskListProps {
  tasks: Task[];
  onStatusChange: (taskId: string, newStatus: TaskStatus) => void;
  onDelete: (taskId: string) => void;
}

2. TaskItem Component

Create a TaskItem component that displays individual task information.

// types/index.ts
export interface TaskItemProps {
  task: Task;
  onStatusChange: (taskId: string, newStatus: TaskStatus) => void;
  onDelete: (taskId: string) => void;
}

3. TaskFilter Component

Create a TaskFilter component that allows filtering tasks by status and priority.

// types/index.ts
export interface TaskFilterProps {
  onFilterChange: (filters: {
    status?: TaskStatus;
    priority?: 'low' | 'medium' | 'high';
  }) => void;
}

Activity Tasks

1. Component Implementation:

   • Implement each component according to its interface requirements.
   • Use proper TypeScript types and interfaces.
   • Implement list rendering with unique keys.
   • Add conditional rendering based on task properties.

2. List Management:

   • Render the task list with proper key props.
   • Implement filtering functionality.
   • Handle task status changes.
   • Implement task deletion.

3. Visual Feedback:

   • Show different styles based on task status and priority.
   • Implement hover and active states.
   • Add visual indicators for task properties.

4. Component Composition:

   • Compose components to create a complete task management interface.
   • Handle prop passing between components.
   • Implement proper event handling.

Completed Example

Optional: One Step Further

This is a self-guided challenge, and is entirely optional.

If you’re looking for a challenge, try to implement the following. If you find yourself stuck, try again after lesson 8, which covers simple forms for user input.

• Add a button to the TaskList component that sorts the tasks by due date.
• Add a button to the TaskList component that adds a new task to the list.
  • This will require adding some type of form for the user to input the task details.
• Add buttons to the TaskItem component that allow the user to move the task up and down the list.

Reflection Questions

1. How did you ensure unique keys for your list items?
2. What considerations did you make when implementing the filtering functionality?
3. How did you handle state updates for task status changes?
4. What challenges did you face when implementing conditional rendering?

Submission

Submit your project via a GitHub repository using the Start Assignment link on Canvas. Your submission should include:

1. All component implementations
2. Example usage with documentation
3. A README.md file explaining how to use the components

Grading Criteria

Your submission will be evaluated on a complete/incomplete basis based on the following criteria:

Total Points: 30