Tournament Update

sth-frontend/src/Tournament.js

@@ -4,14 +4,20 @@ export default function Tournament() {
     const [teams, setTeams] = useState(Array(14).fill({name: '', score: 0}))
 
     function handleChange(key, data, index) {
-        const tempCopy = teams.slice()
+        setTeams((prevTeams) => {
+            const tempCopy = prevTeams.slice(); // Shallow copy of the array
+
+            // Create a new object for the specified index to ensure immutability
+            const updatedObject = { ...tempCopy[index] };
+
+            if (key === 'score') updatedObject.score = parseInt(data);
+            else updatedObject.name = data;
+
+            tempCopy[index] = updatedObject; // Replace the old object with the updated one
+
+            return tempCopy;
+        });
         console.log(teams)
-        console.log(data)
-        if (key === 'score')
-            tempCopy[index].score = data
-        else
-            tempCopy[index].name = data
-        setTeams(tempCopy)
     }
 
     return (
@@ -65,12 +71,12 @@ function Bracket({value, highlight, onDataChange, index}) {
     }}>
         <div id="teamNameWrapper" style={{display: "flex", flexDirection: "column"}}>
             <label htmlFor="teamName" style={{fontSize: "8pt"}}>teamname</label>
-            <input id={`teamName${index}`} type="text" onChange={() => onDataChange('name', document.getElementById(`teamName${index}`).value, index)}/>
+            <input id={`teamName${index}`} type="text" onChange={(e) => onDataChange('name', e.target.value, index)}/>
         </div>
         <div id="scoreWrapper" style={{display: "flex", flexDirection: "column", marginLeft: "10px"}}>
             <label htmlFor={"score" + index} style={{fontSize: "8pt"}}>score</label>
             <input id={`score${index}`} type="number" min={0} style={{width: "35px"}} value={value.score}
-                   onChange={() => onDataChange('score', document.getElementById(`score${index}`).value, index)}/>
+                   onChange={(e) => onDataChange('score', e.target.value, index)}/>
         </div>
     </div>
 }
\ No newline at end of file