sportsView has a working state

src/components/admin/sports/SportartenTable.tsx

@@ -16,13 +16,15 @@ import {ICategorie, ISport} from "./sportsMockData";
 interface SportartenTableProps {
     categories: ICategorie[]
     sportarten: ISport[]
-    activ: boolean
+    activ: boolean,
+    handler:any,
 }
 
 export const SportartenTable: React.FC<SportartenTableProps> = ({
     sportarten,
     categories,
-    activ
+    activ,
+    handler,
 }: SportartenTableProps) => {
     return (
         <Table>
@@ -42,7 +44,7 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({
                 </TableRow>
             </TableHead>
             <TableBody>
-                {sportarten.map((elem) => {
+                {sportarten.map((elem,tx) => {
                     return (
                         <TableRow key={elem.name}>
                             <TableCell> {elem.name}</TableCell>
@@ -52,9 +54,18 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({
                                     <TableCell key={key}>
                                         <TextField
                                             id="outlined-basic"
-                                            label=""
+                                            type="number"
                                             variant="outlined"
                                             value={elem.categoryWeights[key]}
+                                            onChange={(e)=>{
+                                                    console.log(e.currentTarget.value)
+                                                    console.log(parseInt(e.currentTarget.value,10))
+                                                    let copy = [...sportarten]
+                                                    copy[tx].categoryWeights[key]=parseInt(e.currentTarget.value,10)
+                                                    console.log(sportarten[3].categoryWeights)
+                                                    handler(copy)
+                                                }
+                                            }
                                         />
                                     </TableCell>
                                 )

src/components/admin/sports/SportartenView.tsx

-import React from 'react'
+import React, {useState} from 'react'
 import { Fab, makeStyles } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 import { SportartenTable } from './SportartenTable'
@@ -14,37 +14,21 @@ const useStyles = makeStyles((theme) => ({
 
 export const SportartenView: React.FC = () => {
     const classes = useStyles()
-    /*
-    const categories = [
-        'Teamsport',
-        'Ballsport',
-        'Wassersport',
-        'Solo',
-        'Wettkampf',
-        'Fitness',
-    ]
-    const sportarten = [
-        { name: 'Kungfu', werte: [1, 3, 5, 2, 2, 2] },
-        { name: 'Volleyball', werte: [1, 3, 5, 2, 2, 2] },
-        { name: 'Tischtennis', werte: [1, 3, 5, 2, 2, 2] },
-        { name: 'Tischtennis', werte: [1, 3, 5, 2, 2, 2] },
-        { name: 'Tischtennis', werte: [1, 3, 5, 2, 2, 2] },
-        { name: 'Tischtennis', werte: [1, 3, 5, 2, 2, 2] }
-    ]
-    */
-    const categories = mockCategorieData
-    const sportarten = mockSportsData
+    const [categories,setCategories] = useState(mockCategorieData)
+    const [sportarten,setSportarten] = useState(mockSportsData)
 
     return (
         <div>
             <h2>Aktive Sportarten</h2>
             <SportartenTable
+                handler={setSportarten}
                 categories={categories}
                 sportarten={sportarten}
                 activ={true}
             />
             <h2>Inaktive Sportarten</h2>
             <SportartenTable
+                handler={setSportarten}
                 categories={categories}
                 sportarten={sportarten}
                 activ={false}