Dynamic Product Listing with Calculated Discounts

This challenge focuses on leveraging React's component lifecycle and state management to dynamically calculate and display discounts on a list of products. Understanding how to derive values from props and state is crucial for building interactive and data-driven user interfaces. You'll be building a component that displays a list of products, each with a base price and a discount percentage, and calculates the final price after the discount is applied.

Problem Description

You are tasked with creating a React component called ProductList that displays a list of products. Each product has a name, basePrice, and discountPercentage. The component should calculate the discounted price for each product and display it alongside the product's name and base price. The discountPercentage should be a number between 0 and 100 (inclusive). The discounted price should be calculated as basePrice * (1 - discountPercentage / 100).

Key Requirements:

• The component should accept an array of product objects as a prop.
• Each product object should have name, basePrice, and discountPercentage properties.
• The component should calculate the discounted price for each product.
• The component should display the product name, base price, discount percentage, and discounted price.
• The component should handle cases where discountPercentage is 0 (no discount) or 100 (full discount).
• The component should format the prices to two decimal places.

Expected Behavior:

The ProductList component should render a list of product cards. Each card should display the product's name, base price, discount percentage, and the calculated discounted price. The discounted price should be accurately calculated based on the provided discount percentage.

Edge Cases to Consider:

• Empty product list: The component should gracefully handle an empty array of products.
• Invalid discount percentage: While the constraints specify a range of 0-100, consider how you might handle unexpected values (though strict validation isn't required for this challenge).
• Large base prices or discount percentages: Ensure the calculations don't lead to unexpected behavior with very large numbers.

Examples

Example 1:

Input:
[
  { name: "Laptop", basePrice: 1200, discountPercentage: 10 },
  { name: "Mouse", basePrice: 25, discountPercentage: 20 },
  { name: "Keyboard", basePrice: 75, discountPercentage: 0 }
]
Output:
(React component rendering a list with the following product cards)
- Laptop: $1200.00, Discount: 10%, Discounted Price: $1080.00
- Mouse: $25.00, Discount: 20%, Discounted Price: $20.00
- Keyboard: $75.00, Discount: 0%, Discounted Price: $75.00

Explanation: The discounted prices are calculated correctly for each product.

Example 2:

Input:
[]
Output:
(React component rendering an empty list or a message indicating no products are available)

Explanation: The component handles the case where the input array is empty.

Example 3:

Input:
[
  { name: "Monitor", basePrice: 300, discountPercentage: 100 }
]
Output:
(React component rendering a list with the following product card)
- Monitor: $300.00, Discount: 100%, Discounted Price: $0.00

Explanation: The component correctly handles a 100% discount, resulting in a discounted price of $0.00.

Constraints

• The discountPercentage will always be a number between 0 and 100 (inclusive).
• basePrice will always be a non-negative number.
• The component should be written in TypeScript.
• The component should be functional.
• The component should be performant enough to handle a list of up to 100 products without noticeable lag.

Notes

• Consider using the map function to iterate over the product array and render each product card.
• Use template literals or string interpolation to format the output strings.
• Focus on clarity and readability in your code.
• You can use any styling approach you prefer (CSS, styled-components, etc.). Styling is not the primary focus of this challenge.
• Think about how to best structure your component to keep it concise and maintainable.