06_react/unterricht/tag35/04_components-with-hooks/src/App.jsx

@@ -12,17 +12,17 @@ function App(props) {
       <HeaderMain />
       <main id="main">
         <div className="container py-5">
-          <h2>Components with eventhandler</h2>
-
-          <FormNewsletter />
-          <hr />
+          <h2>Components with hooks</h2>
           <InputAmount />
+          <hr />
+          {/* <FormNewsletter />
+
           <hr />
           <Button variant="primary">Button 1</Button>
           <br />
           <Button variant="dark">Button 2</Button>
           <br />
-          <Button>Button 3</Button>
+          <Button>Button 3</Button> */}
         </div>
       </main>
       <FooterMain />

06_react/unterricht/tag35/04_components-with-hooks/src/components/inputs/InputAmount.jsx

@@ -1,12 +1,19 @@
+import { useState } from 'react';
 import { FaMinus, FaPlus } from 'react-icons/fa6';
 
 const InputAmount = (props) => {
+  const [amount, setAmount] = useState(0);
+
   // const { } = props;
 
   // Eventhandler
   const handleChange = (e) => {
-    console.log('Event: ', e);
-    console.log(e.target.value);
+    const value = Number(e.target.value); // e.target.valueAsNumber
+
+    // Guard
+    if (isNaN(value)) return;
+
+    setAmount(value);
   };
   const handleClick = (e) => {
     console.log('Event: ', e);
@@ -14,10 +21,12 @@ const InputAmount = (props) => {
     console.log(e.currentTarget.name);
     switch (e.currentTarget.name) {
       case 'increase':
-        console.loge('inc');
+        setAmount((prevState) => prevState + 1);
+        console.log('inc');
         break;
       case 'decrease':
-        console.loge('dec');
+        setAmount(amount - 1);
+        console.log('dec');
         break;
       default: //nothing
     }
@@ -36,9 +45,10 @@ const InputAmount = (props) => {
           type="number"
           className="form-control input-amount"
           aria-label="Amount"
-          value={0}
+          value={amount}
           onChange={handleChange}
         />
+
         <span className="input-group-text">
           <button className="btn btn-dark button-inc" name="increase" onClick={handleClick}>
             <FaPlus />