diff --git a/packages/kitchen-sink/src/examples/discount-calculator.tsx b/packages/kitchen-sink/src/examples/discount-calculator.tsx
index 0f0011cb75..23c41b4ba3 100644
--- a/packages/kitchen-sink/src/examples/discount-calculator.tsx
+++ b/packages/kitchen-sink/src/examples/discount-calculator.tsx
@@ -4,7 +4,7 @@ import { block } from 'million/react';
interface Results {
discountPrice: number;
finalPrice: number;
- }
+}
@@ -22,7 +22,7 @@ const DiscountCalculator = block(() => {
if (isNaN(p) || isNaN(r) || p <= 0 || r <= 0 ) {
alert('Please enter valid numbers.');
return;
- }
+ }
const discountPrice = p * r;
const finalPrice = p - discountPrice;
@@ -30,43 +30,43 @@ const DiscountCalculator = block(() => {
setResults({
discountPrice,
finalPrice,
- });
+ });
}
- return (
+return (
-
Discount Calculator
-
+
Discount Calculator
+
setOriginalPrice(e.target.value)}
- style={{ display: 'block', marginBottom: '15px' }}
+ type="number"
+ value={originalPrice}
+ onChange={(e) => setOriginalPrice(e.target.value)}
+ style={{ display: 'block', marginBottom: '15px' }}
/>
-
-
+
+
setDiscountRate(e.target.value)}
- style={{ display: 'block', marginBottom: '15px' }}
+ type="number"
+ value={discountRate}
+ onChange={(e) => setDiscountRate(e.target.value)}
+ style={{ display: 'block', marginBottom: '15px' }}
/>
-
-
+
+
- {results && (
+ {results && (
Results:
Final Price : ${results.finalPrice.toFixed(2)}
You Save : ${results.discountPrice.toFixed(2)}
- )}
+ )}
- );
+);
});
export default DiscountCalculator;
\ No newline at end of file