Immutable State Updates in React with TypeScript

React encourages immutable state updates for performance optimization and predictable behavior. This challenge will test your understanding of how to correctly update state immutably in a React component using TypeScript, ensuring that you don't inadvertently mutate the existing state object. Successfully completing this challenge demonstrates a crucial skill for building robust and efficient React applications.

Problem Description

You are tasked with creating a React component that manages a list of items. Each item has a name (string) and a quantity (number). The component should allow users to increment the quantity of an item by clicking a button next to each item. Crucially, you must implement this increment functionality in a way that ensures immutability – meaning you should never directly modify the existing state object. Instead, you must create a new state object with the updated item.

Key Requirements:

• Immutability: State updates must be immutable. Directly modifying the existing state array or item objects is prohibited.
• TypeScript: The code must be written in TypeScript, adhering to type safety.
• Functional Component: Use a functional React component with hooks.
• Clear UI: The component should display the list of items and provide a button to increment each item's quantity.
• Correctness: The quantity of the selected item should increment correctly upon button click.

Expected Behavior:

• The component should render a list of items, each displaying its name and quantity.
• Clicking the "Increment" button next to an item should increase that item's quantity by 1.
• The component should re-render after each increment, reflecting the updated quantity.
• The previous state array should remain unchanged after an update.

Edge Cases to Consider:

• What happens if the initial state is empty? The component should render an appropriate message (e.g., "No items in the list").
• Consider the potential for performance issues if the list is very large. While this challenge doesn't require optimization, be mindful of the principles of immutability and how they can contribute to performance.

Examples

Example 1:

Input: Initial state: [{ name: "Apple", quantity: 2 }, { name: "Banana", quantity: 5 }]
Output: After clicking "Increment" on "Apple": [{ name: "Apple", quantity: 3 }, { name: "Banana", quantity: 5 }]
Explanation: The quantity of "Apple" is incremented to 3, while "Banana" remains unchanged. A new state array is created.

Example 2:

Input: Initial state: [{ name: "Orange", quantity: 1 }]
Output: After clicking "Increment" on "Orange" twice: [{ name: "Orange", quantity: 3 }]
Explanation: The quantity of "Orange" is incremented to 3 after two clicks. Each click results in a new state array.

Example 3:

Input: Initial state: []
Output: The component renders a message "No items in the list".
Explanation: Handles the edge case of an empty initial state.

Constraints

• The list of items will never exceed 100 items.
• Item names will be strings with a maximum length of 50 characters.
• Item quantities will be non-negative integers.
• The component should re-render within 200ms after each increment. (This is a general React performance guideline, not a strict requirement for this challenge).

Notes

• Use the useState hook to manage the state.
• The spread operator (...) is a useful tool for creating new objects and arrays immutably.
• Consider how to efficiently update the quantity of a specific item within the array. You'll need to identify the item to update based on its name.
• Focus on creating a clean and readable solution that demonstrates a clear understanding of immutable state updates in React.