Prioritized Task List with React

This challenge asks you to build a React component that displays a list of tasks, prioritizing them based on a numerical priority level. Implementing a priority lane system is a common requirement in task management applications, allowing users to focus on the most important items first. This exercise will test your understanding of React component structure, state management, and conditional rendering.

Problem Description

You need to create a PriorityTaskList component that renders a list of tasks. Each task will be an object with a text property (string) and a priority property (number, where a higher number indicates higher priority). The component should sort the tasks by priority in descending order (highest priority first) and display them in separate "lanes" based on their priority level.

The lanes should be categorized as follows:

• High Priority (Priority 3-5): Displayed in a "High" lane.
• Medium Priority (Priority 1-2): Displayed in a "Medium" lane.
• Low Priority (Priority 0): Displayed in a "Low" lane.

The component should accept a tasks prop, which is an array of task objects. The component should render a visually distinct lane for each priority category, and within each lane, display the tasks belonging to that category. The tasks within each lane should be displayed in the order they appear in the input tasks array (no further sorting within a lane is required).

Key Requirements:

• Create a functional React component named PriorityTaskList.
• Accept a tasks prop (array of task objects).
• Sort tasks by priority in descending order.
• Categorize tasks into "High," "Medium," and "Low" priority lanes based on the priority values described above.
• Render each lane with a clear label (e.g., "High Priority", "Medium Priority", "Low Priority").
• Display each task's text within its corresponding lane.
• Handle the case where a priority level doesn't exist (e.g., negative priority values - treat them as Low).
• Handle the case where the tasks array is empty.

Expected Behavior:

The component should render a list of lanes, each containing tasks of a specific priority level. The lanes should be displayed in the order: High, Medium, Low. Tasks within each lane should be displayed sequentially as they appear in the input array. If a lane has no tasks, it should not be rendered.

Examples

Example 1:

Input: [
  { text: "Grocery Shopping", priority: 1 },
  { text: "Pay Bills", priority: 5 },
  { text: "Walk the Dog", priority: 0 },
  { text: "Book Doctor Appointment", priority: 3 },
  { text: "Respond to Emails", priority: 2 }
]
Output: (React component rendering)
High Priority:
  - Pay Bills
Medium Priority:
  - Respond to Emails
  - Book Doctor Appointment
Low Priority:
  - Grocery Shopping
  - Walk the Dog
Explanation: Tasks are sorted by priority (descending).  Tasks are grouped into High, Medium, and Low lanes based on their priority values.

Example 2:

Input: [
  { text: "Task A", priority: 4 },
  { text: "Task B", priority: 4 },
  { text: "Task C", priority: 1 }
]
Output: (React component rendering)
High Priority:
  - Task A
  - Task B
Medium Priority:
  - Task C
Explanation: Tasks with the same priority are displayed in the order they appear in the input array.

Example 3:

Input: []
Output: (React component rendering - no lanes displayed)
Explanation: An empty tasks array results in no lanes being rendered.

Constraints

• The tasks array will contain objects with text (string) and priority (number) properties.
• Priority values can be non-negative integers. Negative priority values should be treated as Low priority.
• The component should be performant enough to handle a list of up to 100 tasks without noticeable lag.
• The component should be written in TypeScript.

Notes

• Consider using React's built-in state management or a third-party library if you feel it's necessary, but a simple state management approach is preferred for this challenge.
• Focus on clear and readable code.
• Think about how to efficiently categorize the tasks based on their priority. Avoid unnecessary iterations.
• Pay attention to the visual presentation of the lanes and tasks. Clear labels and consistent formatting are important.
• You can use any styling approach you prefer (CSS, styled-components, etc.). The styling itself is not the primary focus of this challenge, but the component should be reasonably presentable.