06_react/uebungen/u13_input-amount/src/components/inputs/InputAmount.jsx

@@ -1,19 +1,41 @@
+import { useState } from 'react';
 import { FaMinus, FaPlus } from 'react-icons/fa6';
 // npm install react-icons  | Auf der npm Seite mit --save, ist nicht mehr nötig
 const InputAmount = (props) => {
   // const { } = props;
+  const min = 0;
+  const max = 10;
+  const [amount, setAmount] = useState(0);
 
   // EventHandlers ================
   const handleChange = (e) => {
     console.log(e); // Event-Objekte wurden um React Methoden und Eigenschaften erweitert. (SyntheticBaseEvent anstatt InputEvent)
-    console.log(e.target.value);
+
+    const value = Number(e.target.value);
+
+    if (isNaN(value) || value > max) return;
+    setAmount(value);
+  };
+
+  const handleClickDecrease = (e) => {
+    if (amount <= min) return;
+    setAmount(amount - 1);
+  };
+
+  const handleClickIncrease = (e) => {
+    if (amount >= max) return;
+    setAmount(amount + 1);
   };
 
   return (
     <div className="m-input-amount input-amount">
       <div className="input-group mb-3">
         <span className="input-group-text">
-          <button className="btn btn-dark button-decrease" aria-label="Decrease Amount">
+          <button
+            className="btn btn-dark button-decrease"
+            aria-label="Decrease Amount"
+            onClick={handleClickDecrease}
+            disabled={amount <= min}>
             <FaMinus />
           </button>
         </span>
@@ -21,12 +43,19 @@ const InputAmount = (props) => {
           type="number"
           name="amount"
           placeholder="0"
+          min={min}
+          max={max}
           aria-label="Amount"
           className="form-control input-amount"
           onChange={handleChange}
+          value={amount}
         />
         <span className="input-group-text">
-          <button className="btn btn-dark button-increase" aria-label="Increase Amount">
+          <button
+            className="btn btn-dark button-increase"
+            aria-label="Increase Amount"
+            onClick={handleClickIncrease}
+            disabled={amount >= max}>
             <FaPlus />
           </button>
         </span>