button geht nicht; qr

src/components/Qr.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom';
 import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
 import Checkbox from './Checkbox';
@@ -11,7 +11,6 @@ type ListItemT =
     ordernum: number;
 }
 
-
 export default function Qr() 
 {
     const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
@@ -24,25 +23,29 @@ export default function Qr()
                                                 {name:'Telefon', ordernum: 2},
                                                 {name:'Email', ordernum: 3}
                                              ]);
+                                             
     //save reference for dragItem and dragOverItem
     const dragItem = React.useRef<any>(null);
     const dragOverItem = React.useRef<any>(null);
 
-    function incrementFontSize()  
+    const incrementFontSize = (():void =>
     {
         if(fontSize < 200)
         {
             setFontSize(fontSize + 1);
         }
-    }
 
-    function decrementFontSize() 
+        console.log("\nincrementFontSize " + fontSize);
+    });
+
+    const decrementFontSize = (():void =>  
     {
         if(fontSize > 1)
         {
-            setFontSize(fontSize - 1);
+            setFontSize(fontSize -1);
         }
-    }
+        console.log("\ndecrementFontSize " + fontSize);
+    });
 
     function setBitField(val: number, checked: boolean, bit: number) : number
     {
@@ -132,45 +135,49 @@ export default function Qr()
             <div>
                 <h1>Qr-Code Druck</h1>
                 <Link to={"/profil"}>Zurück zum Profil</Link>
-
-                <div> 
-                    <button onClick={incrementFontSize}>up</button>
-                    <div>{fontSize}</div>
-                    <button onClick={decrementFontSize}>down</button>
-                </div>
-                <div>
-                <Checkbox 
-                        id='name' 
-                        label={'Name'} 
-                        checked={(visibleItem & 0b100) > 0} 
-                        changeEvent={checkBoxChange}
-                        />
+                <div className='qrSettings'>
+                    <div>Schriftgröße</div>
+                    <div className='spinBtn'> 
+                        <button onClick={decrementFontSize}>-</button>
+                        <div>{fontSize}</div>
+                        <button onClick={incrementFontSize}>+</button>
+                    </div>
+                    <div>
+                    <div>Sichtbare Elemente</div>
                     <Checkbox 
-                        id='phone' 
-                        label={'Telefon'} 
-                        checked={(visibleItem & 0b010) > 0} 
-                        changeEvent={checkBoxChange}
-                        />
-                    <Checkbox 
-                        id='email' 
-                        label={'Email'} 
-                        checked={(visibleItem & 0b001) > 0} 
-                        changeEvent={checkBoxChange}
-                        />
-                </div>
-                <div className="list-container">
-				{itemList.map((item, index) => (
-					<div
-						key={index}
-						className="list-item"
-						draggable
-						onDragStart={(e) => (dragItem.current = index)}
-						onDragEnter={(e) => (dragOverItem.current = index)}
-						onDragEnd={handleSort}
-						onDragOver={(e) => e.preventDefault()}>
-						<h6>{item.name}</h6>
-					</div>
-				))}
+                            id='name' 
+                            label={'Name'} 
+                            checked={(visibleItem & 0b100) > 0} 
+                            changeEvent={checkBoxChange}
+                            />
+                        <Checkbox 
+                            id='phone' 
+                            label={'Telefon'} 
+                            checked={(visibleItem & 0b010) > 0} 
+                            changeEvent={checkBoxChange}
+                            />
+                        <Checkbox 
+                            id='email' 
+                            label={'Email'} 
+                            checked={(visibleItem & 0b001) > 0} 
+                            changeEvent={checkBoxChange}
+                            />
+                    </div>
+                    <div>Reihenfolge</div>
+                    <div className="list-container">
+                    {itemList.map((item, index) => (
+                        <div
+                            key={index}
+                            className="list-item"
+                            draggable
+                            onDragStart={(e) => (dragItem.current = index)}
+                            onDragEnter={(e) => (dragOverItem.current = index)}
+                            onDragEnd={handleSort}
+                            onDragOver={(e) => e.preventDefault()}>
+                            <h6>{item.name}</h6>
+                        </div>
+                    ))}
+                    </div>
                 </div>
                 
                 <div className='blockRepeat'>