Do not take my question down before reading this, please.
My code is not even getting inside the if statements(I tested this with console.logs). There is not a similar answer to this that I have seen. I even added a use effect which would fix it if it was a timing/ asynchronous issue
Objective:
I want to test to see if the value of any of the pairs is an empty string. if it is I am setting it equal to a static value that's already in my code(Under bout).
Please note:
I am aware that the easiest way to solve this problem is to set default states, however, I would like to know why what I have implemented here is not working. Also, I don't know why this question was marked as having a similar answer, that has to do with setting state... My code is not getting into the if statements at all!
Problem:
The problem is that no matter what it seems I am not getting into any of the if statements. Whether I test if the value is false (Empty strings should be falsely value) or if I just straight-up test to see if they are a string (which I know they are) either way. All of the values in theFinalEdited bout are pieces of individual state from controled react inputs
What I thought was the problem:
The reason why this code does not work is that state is IMUTTABLE This means you can not change the value of state since each key value is an actual piece of state you must set each one of those respectively. Each value in theFinalEditedBout is its own piece of state that is from a controlled react input that correlates to a form.
Code :
const takeInTheInputs = () => {
let theFinalEditedBout = {
topLineWrestler,
bottomLineWrestler,
dispatched,
dispatchedToMat,
winner,
loser,
matchNumber,
round,
score,
userID: 1
};
(function () {
let arrayOfKeyValuePairs = Object.entries(theFinalEditedBout);
arrayOfKeyValuePairs.map((keyPair, index) => {
console.log({ index, keyPair })
switch (index) {
case 0:
console.log(`I got to case ${index}`);
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
setTopLineWrestler(bout.top_line_wrestler);
break;
} else {
break;
}
case 1:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
setBottomLineWrestler(bout.bottom_line_wrestler);
// bout.bottomLineWrestler = bout.bottom_line_wrestler;
break;
} else {
break;
}
case 2:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
setDispatched(bout.dispatched);
// bout.dispatched = bout.dispatched;
break;
} else {
break;
}
case 3:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] = '') {
setDispatchedToMat(12)
// bout.dispatchedToMat = bout.dispatched_to_mat;
break;
} else {
break;
}
case 4:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
console.log("I am in")
setWinner(bout.winner)
// bout.winner = bout.winner;
break;
} else {
break;
}
case 5:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
setLoser(bout.loser)
// bout.loser = bout.loser;
break;
} else {
break;
}
case 6:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
setMatchNumber(bout.match_number);
// bout.matchNumber = bout.match_number;
break;
} else {
break;
}
case 7:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
setRound(bout.round)
// bout.round = bout.round;
break;
} else {
break;
}
case 8:
console.log(`I got to case ${index}`)
console.log({ keyPairString: keyPair[1] });
if (keyPair[1] === '') {
setScore(bout.score)
// bout.score = bout.score;
break;
} else {
break;
}
}
console.log({
theFinalEditedBout,
bout
});
})
useEffect(() => {
setEditOfBout({
topLineWrestler,
bottomLineWrestler,
dispatched,
dispatchedToMat: Number(dispatchedToMat),
winner,
loser,
matchNumber,
round,
score,
userID: 1
});
}, [topLineWrestler,
bottomLineWrestler,
dispatched,
dispatchedToMat,
winner,
loser,
matchNumber,
round,
score,])
})();
const requestOptions = {
method: "PUT",
headers: {
"Content-Type": "application/json",
// Authorization: `Bearer token`,
},
body: JSON.stringify(editOfBout),
};
fetch(`/api/bouts/${BoutId}`, requestOptions).then((res) => {
if (res.ok) {
} else {
alert("it didn't work! Coach Wayne Apologizes try again later");
}
});
}
Where the function is called
return (
<Form style={{ width: "90%", border: "2px solid slateGrey", borderRadius: "5px" }} className="mx-auto bg-dark text-light mt-2 p-2">
<Form.Group className="mb-3" >
<Form.Label>topLineWrestler</Form.Label>
<Form.Control onChange={(e) => setTopLineWrestler(e.target.value)} type="text" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>bottomLineWrestler</Form.Label>
<Form.Control onChange={(e) => setBottomLineWrestler(e.target.value)} type="text" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>dispatched</Form.Label>
<Form.Control onChange={(e) => setDispatched(e.target.value)} type="number" placeholder="0 ==='' 1 = true" />
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>dispatchedToMat</Form.Label>
<Form.Control onChange={(e) => setDispatchedToMat(e.target.value)} type="text" placeholder="text" />
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>winner</Form.Label>
<Form.Control onChange={(e) => setWinner(e.target.value)} type="text" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>loser</Form.Label>
<Form.Control onChange={(e) => setLoser(e.target.value)} type="text" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>matchNumber</Form.Label>
<Form.Control onChange={(e) => setMatchNumber(e.target.value)} type="text" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>Round</Form.Label>
<Form.Control onChange={(e) => setRound(e.target.value)} type="text" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>Score</Form.Label>
<Form.Control onChange={(e) => setScore(e.target.value)} type="text" placeholder="Password" />
</Form.Group>
<Button variant="primary" type="button" onClick={takeInTheInputs}>
Submit
</Button>
</Form>
console.logs
editOfBout: {}
KeyPairString: Logs an empty string on most keys
theFinalEditedBout: Logs it's starting Values
bout:
{
bottom_line_wrestler: "{\"name\":\"bye\",\"team\":\"bye\",\"seed\":20}"
created_at: "2022-03-02T17:43:32.000Z"
created_by_user: 1
dispatched: 0
dispatched_to_mat: null
division_id: 3
event_division_bout_concatenated: "e2d3b7"
event_id: 2
id: 133
loser: null
match_number: 7
round: 1
score: null
top_line_wrestler: "{\"name\":\"bye\",\"team\":\"bye\",\"seed\":13}"
winner: null
}
