From 4f5c322fa1f69f3caeea86389e7090231d4d2dce Mon Sep 17 00:00:00 2001
From: andriluccahannes <lb214@hdm-stuttgart.de>
Date: Mon, 13 Nov 2023 17:57:36 +0100
Subject: [PATCH] Tournament Update
---
sth-frontend/src/Tournament.js | 24 +++++++++++++++---------
1 file changed, 15 insertions(+), 9 deletions(-)
diff --git a/sth-frontend/src/Tournament.js b/sth-frontend/src/Tournament.js
index 908ebbf..ddf1b86 100644
--- a/sth-frontend/src/Tournament.js
+++ b/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
--
GitLab