Currently, I am working on utilizing <select> tags to update information across components using useContext(). However, I am encountering an issue where the default case is consistently being returned despite the fact that the logged values match the set case values.
This is the renderer for the various select elements:
const selectNames = [
"Strength",
"Dexterity",
"Constitution",
"Intelligence",
"Wisdom",
"Charisma"
]
const options = [
{
label: '16',
value: '16'
},
{
label: '14',
value: '14-1'
},
{
label: '14',
value: '14-2'
},
{
label: '12',
value: '12-1'
},
{
label: '12',
value: '12-2'
},
{
label: '10',
value: '10'
}
]
const selectRender = selectNames.map((name, index) => {
return (
<>
<label for={name}>{name}:</label>
<select name={name} key={index} onChange={handleChange} value={chosenOptions[name] || ''}
required={index === 0} id={name.toLowerCase()}>
<option value=''/>
{options.filter(({value}) => !isChosenByOther(value, name))
.map(({label, value}, oIndex) =>
<option value={value} key={oIndex}>{label}</option>)
}
</select>
</>
)
})
The following code snippet shows the event handler function with a switch case:
The functions like setStrength() are all correctly referenced from the context component. Even if there is an issue in those functions, it should not affect this specific problem since they are not called within this code block.
const handleChange = (ev) => {
setChosenOptions({...chosenOptions, [ev.target.name]: ev.target.value});
console.log(ev.target.name)
switch (ev.target.name) {
case "Strength":
setStrength(ev.target.value)
case "Dexterity":
setDexterity(ev.target.value)
case "Constitution":
setConstitution(ev.target.value)
case "Intelligence":
setIntelligence(ev.target.value)
case "Wisdom":
setWisdom(ev.target.value)
case "Charisma":
setCharisma(ev.target.value)
default:
console.log("attribute wasn't successfully changed")
}
};
While selecting values within the React app, the corresponding <select> element is correctly identified but the default function is always triggered.
The console logs display:
Intelligence
attribute wasn't successfully changed
Charisma
attribute wasn't successfully changed
Wisdom
attribute wasn't successfully changed
Please let me know if additional sections of code or information are needed.