add router and try some fixes on the KepzettsegSelector.tsx

src/App.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
 import './App.css';
 import CreateCharacter from "./pages/CreateCharacter";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <CreateCharacter />,
+    },
+]);
 
 function App() {
   return (
-    <div className="container">
+      <div className='container'>
-        <CreateCharacter />
+        <RouterProvider router={router} />
       </div>
   );
 }

src/components/KarakterKepzettsegek.tsx

@@ -18,6 +18,22 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
 
     const klist = Array.from(new Array(numberOfKepzettseg).keys())
 
+    const preCalculated: {
+        kepzettsegek: Kepzettseg[],
+        registration: UseFormRegisterReturn,
+        selected: Kepzettseg,
+    }[] = [];
+
+    for (let i = 0; i < numberOfKepzettseg; i++) {
+        preCalculated.push({
+            kepzettsegek: getKepzettsegListaN(i),
+            registration: register(i),
+            selected: getKepzettsegN(i)
+        })
+    }
+
+    console.log(preCalculated)
+
     return <>
         <div className='row'>
             <div className='col-lg-2 col-md-12'>
@@ -26,11 +42,10 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
             <div className='col'>
                 {klist.map((idx) =>
                     <KepzettsegSelector
-                        key={idx}
+                        key={title+idx}
-                        kepzettsegek={getKepzettsegListaN(idx)}
+                        kepzettsegek={preCalculated[idx].kepzettsegek}
-                        fieldRegistration={register(idx)}
+                        fieldRegistration={preCalculated[idx].registration}
-                        defaultValue={availableKepzettsegList[idx]}
+                        selected={preCalculated[idx].selected}
-                        selected={getKepzettsegN(idx)}
                     />)
                 }
             </div>
@@ -61,15 +76,12 @@ function KarakterKepzettsegek (props: {
     }
     console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
 
-    const getKepzettsegN = (n: number) => Kepzettsegek[watch('kep_'+n, availableKepzettsegList[n].Id) as KepzettsegId]
+    const getKepzettsegN = (n: number) => Kepzettsegek[watch('kepzettseg.'+n, availableKepzettsegList[n].Id) as KepzettsegId]
 
     const getKepzettsegListaN = (n: number) => {
         let response = availableKepzettsegList;
         for (let i = 0; i < numberOfKepzettseg; i++) {
-            if (i === n) {
+            response = response.filter(x => i === n || x.Id !== getKepzettsegN(i).Id)
-                continue;
-            }
-            response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
         }
         if (osztaly === Osztaly.Tolvaj) {
             for (let i = 0; i < 4; i++) {
@@ -90,10 +102,7 @@ function KarakterKepzettsegek (props: {
         }
         // filter out selected tolvaj kepzettsegek
         for (let i = 0; i < 4; i++) {
-            if (i === n) {
+            response = response.filter(x => i === n || x.Id !== getTolvajKepzettsegN(i).Id)
-                continue;
-            }
-            response = response.filter(x => x.Id !== getTolvajKepzettsegN(i).Id)
         }
         return response
     }

src/components/KepzettsegSelector.tsx

@@ -9,12 +9,14 @@ function kepzettsegOptionText(k: Kepzettseg) {
     return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')' + (osztalyok == null ? '' : (' - ' + osztalyok));
 }
 
-// this is required for render optimization, which happens because selected is not a prop of this component so selecting an item doesn't trigger a rendering of this select field.
+function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, selected : Kepzettseg}) {
-function KepzettsegSelect(props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, defaultValue: Kepzettseg}) {
+
-    const { kepzettsegek, fieldRegistration, defaultValue} = props
+    const { kepzettsegek, fieldRegistration, selected } = props
-    return <div className='row'>
+
+    return <>
+        <div className='row'>
             <select className='form-control'
-                defaultValue={defaultValue.Id} {...fieldRegistration}>
+                    value={selected.Id} {...fieldRegistration}>
                 {kepzettsegek.map(k =>(
                     <option key={k.Id} value={k.Id}>
                         {kepzettsegOptionText(k)}
@@ -22,15 +24,6 @@ function KepzettsegSelect(props: {kepzettsegek: Kepzettseg[], fieldRegistration:
                 ))}
             </select>
         </div>
-
-}
-
-function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, defaultValue: Kepzettseg, selected : Kepzettseg}) {
-
-    const { kepzettsegek, fieldRegistration, defaultValue, selected } = props
-
-    return <>
-        <KepzettsegSelect kepzettsegek={kepzettsegek} fieldRegistration={fieldRegistration} defaultValue={defaultValue} />
         <div className='row pt-2'>
             <p className='col'>{selected.Description}</p>
         </div>

src/pages/CreateCharacter.tsx

@@ -7,7 +7,7 @@ import FajSelector from "../components/FajSelector";
 import Tulajdonsagok from "../components/Tulajdonsagok";
 import OsztalySelector from "../components/OsztalySelector";
 import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
-import {KarakterTulajdonsagok, Tulajdonsag} from "../domain-models/tulajdonsag";
+import {KarakterTulajdonsagok} from "../domain-models/tulajdonsag";
 import MasodlagosErtekek from "../components/MasodlagosErtekek";
 
 const FAJ_FIELD_NAME = 'faj'
@@ -75,7 +75,7 @@ function CreateCharacterPage() {
                     <KarakterKepzettsegek
                         faj={currentFaj()}
                         osztaly={currentOsztaly()}
-                        t_int={watch(Tulajdonsag.Intelligencia, 10)}
+                        t_int={watch('tul', tulajdonsagDefaults).t_int}
                         register={(fieldName: string) => register(fieldName, {required: true})}
                         watch={watch}
                     />