I’m building a Dnd Character Sheet builder. I need 6 dropdowns for each of the 6 main stats. I want them all to have access to an array of the values [8,10,12,13,14,15], but if one dropdown selects a number, I need that number to be unavailable in the dropdowns. So if the user chooses 15 for the strength score, the other dropdowns would no longer have the option to choose 15.
This is where I build the dropdowns.
<div>
{standardArray.map((stat, index) => {
return (
<div key={index}>
<Text marginLeft={5}> {stat.name[index]}</Text>
<Select
placeholder={stat.name[index]}
width="90%"
marginLeft={3}
marginBottom={3}
onChange={handleChange}
name={"playerStat" + [index]}
>
Name: {stat.name}
{stat.value.map((value, index) => {
return (
<option key={index} value={value}>
{value}
</option>
);
})}
</Select>
</div>
);
})}
</div>
and these are the arrays and the value assignments
function App() {
const [count, setCount] = useState(0);
const statArray = [8, 10, 12, 13, 14, 15];
const statTitles = ["STR", "CON", "DEX", "INT", "WIS", "CHA"];
const standardArray = [
{ id: 1, name: statTitles, value: statArray },
{ id: 2, name: statTitles, value: statArray },
{ id: 3, name: statTitles, value: statArray },
{ id: 4, name: statTitles, value: statArray },
{ id: 5, name: statTitles, value: statArray },
{ id: 6, name: statTitles, value: statArray },
];
const [state, setState] = useState({
playerName: "Test",
playerSpecies: "",
playerClass: "",
playerSubclass: "",
playerStat0: 15,
playerStat1: 14,
playerStat2: 13,
playerStat3: 10,
playerStat4: 8,
playerStat5: 12,
playerLevel: 1,
strModifier: 0,
conModifier: 0,
dexModifier: 0,
intModifier: 0,
wisModifier: 0,
chaModifier: 0,
playerHp: 24,
proficiencyBonus: 2,
speciesBonus: 0,
});