React Buttons and State - how to avoid too many States? - reactjs

Question

I am still somewhat of a novice to React with much to learn. At the moment I am trying to make a page displaying lightsabers and hilts from Star Wars by clicking a button to show the ones you want. I am doing this by using State, which by the amount of states I currently have seems like the wrong way of doing it.
Here's how I'm doing it: I set a State and put an onClick event that sets the chosen hilt/color to true and the rest to false whilst also rendering information of said hilt/color. It looks like this:
import { ReactComponent as QuiGon } from './qui-gon.svg';
import { ReactComponent as ObiWan } from './obi-wan.svg';
import { ReactComponent as ObiWanOld } from './obi-hilt-old.svg';
import { ReactComponent as DarthMaul } from './darth-maul-hilt.svg';
import { ReactComponent as AhsokaHilt } from './ahsoka-hilt.svg';
import { ReactComponent as AnakinHilt } from './anakin-hilt.svg';
import { ReactComponent as VaderHilt } from './darth-vader-hilt.svg';
import { ReactComponent as KyloHilt } from './kylo-ren-hilt.svg';
import './App.css';
function App() {
const [nonChosen, setNonChosen] = useState(true);
const [blue, setBlue] = useState(false);
const [red, setRed] = useState(false);
const [green, setGreen] = useState(false);
const [purple, setPurple] = useState(false);
const [yellow, setYellow] = useState(false);
const [white, setWhite] = useState(false);
const [saberOne, setSaberOne] = useState(true);
const [doubleSaber, setDoubleSaber] = useState(false);
const [quiGon, setQuiGon] = useState(false);
const [obiWanNew, setObiWanNew] = useState(false);
const [obiWanOld, setObiWanOld] = useState(false);
const [ahsoka, setAhsoka] = useState(false);
const [anakinHilt, setAnakinHilt] = useState(false);
const [vaderHilt, setVaderHilt] = useState(false);
const [kyloHilt, setKyloHilt] = useState(false);
return (
<div className="App">
{/* Colors */}
<button className="testsub" onClick={() => {setGreen(true); setWhite(false); setYellow(false); setPurple(false); setRed(false); setBlue(false); setNonChosen(false);}}>Green
</button>
<button className="testsub" onClick={() => {setBlue(true); setWhite(false); setYellow(false); setPurple(false); setRed(false); setGreen(false); setNonChosen(false);}}>Blue
</button>
<button className="testsub" onClick={() => {setRed(true); setWhite(false); setYellow(false); setPurple(false); setBlue(false); setGreen(false); setNonChosen(false);}}>Red
</button>
<button className="testsub" onClick={() => {setPurple(true); setWhite(false); setYellow(false); setGreen(false); setRed(false); setBlue(false); setNonChosen(false);}}>Purple
</button>
<button className="testsub" onClick={() => {setYellow(true); setWhite(false); setPurple(false); setGreen(false); setRed(false); setBlue(false); setNonChosen(false);}}>Yellow
</button>
<button className="testsub" onClick={() => {setWhite(true); setYellow(false); setPurple(false); setGreen(false); setRed(false); setBlue(false); setNonChosen(false);}}>White
</button>
<br />
{/* Hilts */}
<button className="testsub" onClick={() => {setDoubleSaber(true); setKyloHilt(false); setVaderHilt(false); setAnakinHilt(false); setAhsoka(false); setSaberOne(false); setQuiGon(false); setObiWanNew(false); setObiWanOld(false);}}>Darth Maul
</button>
<button className="testsub" onClick={() => {setQuiGon(true); setKyloHilt(false); setVaderHilt(false); setAnakinHilt(false); setAhsoka(false); setDoubleSaber(false); setSaberOne(false); setObiWanNew(false); setObiWanOld(false);}}>Qui Gon
</button>
<button className="testsub" onClick={() => {setObiWanNew(true); setKyloHilt(false); setVaderHilt(false); setAnakinHilt(false); setAhsoka(false); setDoubleSaber(false); setSaberOne(false); setQuiGon(false); setObiWanOld(false);}}>Obi Wan
</button>
<button className="testsub" onClick={() => {setObiWanOld(true); setKyloHilt(false); setVaderHilt(false); setAnakinHilt(false); setAhsoka(false); setDoubleSaber(false); setSaberOne(false); setQuiGon(false); setObiWanNew(false);}}>Obi Wan Old
</button>
<button className="testsub" onClick={() => {setAhsoka(true); setKyloHilt(false); setVaderHilt(false); setAnakinHilt(false); setObiWanOld(false); setDoubleSaber(false); setSaberOne(false); setQuiGon(false); setObiWanNew(false);}}>Ahsoka Tano
</button>
<button className="testsub" onClick={() => {setAnakinHilt(true); setKyloHilt(false); setVaderHilt(false); setAhsoka(false); setObiWanOld(false); setDoubleSaber(false); setSaberOne(false); setQuiGon(false); setObiWanNew(false);}}>Anakin
</button>
<button className="testsub" onClick={() => {setVaderHilt(true); setKyloHilt(false); setAnakinHilt(false); setAhsoka(false); setObiWanOld(false); setDoubleSaber(false); setSaberOne(false); setQuiGon(false); setObiWanNew(false);}}>Vader
</button>
<button className="testsub" onClick={() => { setKyloHilt(true);setVaderHilt(false); setAnakinHilt(false); setAhsoka(false); setObiWanOld(false); setDoubleSaber(false); setSaberOne(false); setQuiGon(false); setObiWanNew(false);}}>Kylo
</button>
<div class="lightsaber">
<input type="checkbox" id="on-off" />
{nonChosen && (
<>
<div className="blade colol"></div>
{/* <div className="blade2 colol"></div> */}
</>
)}
{blue && (
<div className="blade colol2"></div>
)}
{red && (
<div className="blade red-clr"></div>
)}
{green && (
<div className="blade colol"></div>
)}
{purple && (
<div className="blade purple-clr"></div>
)}
{yellow && (
<div className="blade yellow-clr"></div>
)}
{white && (
<div className="blade white-clr"></div>
)}
{saberOne && (
<label className="hilt" for="on-off">
<QuiGon />
</label>
)}
{doubleSaber && (
<>
<div className="blade2 colol"></div>
<label className="hilt" for="on-off">
<DarthMaul />
</label>
</>
)}
{quiGon && (
<label className="hilt" for="on-off">
<QuiGon />
</label>
)}
{obiWanNew && (
<label className="hilt" for="on-off">
<ObiWan />
</label>
)}
{obiWanOld && (
<label className="hilt" for="on-off">
<ObiWanOld />
</label>
)}
{ahsoka && (
<label className="hilt" for="on-off">
<AhsokaHilt />
</label>
)}
{anakinHilt && (
<label className="hilt" for="on-off">
<AnakinHilt />
</label>
)}
{vaderHilt && (
<label className="hilt" for="on-off">
<VaderHilt />
</label>
)}
{kyloHilt && (
// <label className="hilt" for="on-off">
// <KyloHilt className="hilt2"/>
// </label>
<>
<div className="blade3 colol"></div>
<div className="blade4 colol"></div>
<label className="hilt" for="on-off">
<KyloHilt className="hilt2"/>
</label>
</>
)}
</div>
<div className="infobox">
{nonChosen && (
<div>Yoyoyo</div>
)}
{blue && (
<div>aasdsd</div>
)}
{green && (
<div>fgfgfg</div>
)}
</div>
</div>
);
}
export default App;
It is not completed hence a bit messy, but the problem shows quite nice. I have a lot of States and the buttons gets quite long with all the setX(false).
Is there any way to do this in a better way? I've been pondering for a long time about doing it pure CSS, with if/else etc. but I can't seem to wrap my head around how go get the button to display one thing and leave the rest hidden without having to over-specify it like I already am. Again I am still a novice, so any help would really be appreciated (and again sorry for the spaghetti code)!

Answer 1

You can initialize the values in an object and use them as initial state
const initialValues = {
nonChosen: true,
blue: false,
red: false,
green: false,
purple: false,
yellow: false,
white: false,
// All other states in this or create a seperate object with seperate useState according to your wish
};
And initialize the state as
const [colors, setColors] = useState(initialValues);
Setting the value during onClick as
<button className="testsub" onClick={() => {setColors({...colors,green:true,white:false,yellow:false,purple:false,red:false,blue:false,nonchosen:false})>Green</button>
During rendering:
{colors.nonChosen && (
<>
<div className="blade colol"></div>
{/* <div className="blade2 colol"></div> */}
</>
)}

Answer 2

You can use useReducer hook.
Also, you can inline event (for color) or callback event (for hilt).
I used two cases.
const initialColorState = {
nonChosen: false,
blue: false,
red: false,
green: false,
purple: false,
yellow: false,
white: false,
};
const initialHiltState = {
saberOne: false,
doubleSaber: false,
quiGon: false,
obiWanNew: false,
obiWanOld: false,
ahsoka: false,
anakinHilt: false,
vaderHilt: false,
kyloHilt: false
}
function colorReducer(state, action) {
switch (action.type) {
case "Blue": {
return {
...state,
...initialColorState,
blue: true,
}
}
case "Red": {
return {
...state,
...initialColorState,
red: true,
}
}
case "Green": {
return {
...state,
...initialColorState,
green: true,
}
}
case "Purple": {
return {
...state,
...initialColorState,
purple: true,
}
}
case "Yellow": {
return {
...state,
...initialColorState,
yellow: true,
}
}
case "White": {
return {
...state,
...initialColorState,
white: true,
}
}
}
}
function hiltReducer(state, action) {
switch (action.type) {
case "DoubleSaber": {
return {
...state,
...initialHiltState,
doubleSaber: true,
}
}
case "QuiGon": {
return {
...state,
...initialHiltState,
quiGon: true,
}
}
case "ObiWanNew": {
return {
...state,
...initialHiltState,
obiWanNew: true,
}
}
case "ObiWanOld": {
return {
...state,
...initialHiltState,
obiWanOld: true,
}
}
case "Ahsoka": {
return {
...state,
...initialHiltState,
ahsoka: true,
}
}
case "Anakin": {
return {
...state,
...initialHiltState,
anakinHilt: true,
}
}
case "Vader": {
return {
...state,
...initialHiltState,
vaderHilt: true,
}
}
case "Kylo": {
return {
...state,
...initialHiltState,
kyloHilt: true,
}
}
}
}
function App() {
const [colorState, colorDispatch] = useReducer(colorReducer, initialColorState)
const [hiltState, hiltDispatch] = useReducer(hiltReducer, initialHiltState);
const onHiltClick = useCallback((event) => {
hiltDispatch({type: event.value});
}, [hiltDispatch]);
return (
<div className="App">
{/* Colors */}
<button
className="testsub"
onClick={() => {
colorDispatch({ type: "Green" })
}}
>
Green
</button>
<button
className="testsub"
onClick={() => {
colorDispatch({ type: "Blue" })
}}
>
Blue
</button>
<button
className="testsub"
onClick={() => {
colorDispatch({ type: "Red" })
}}
>
Red
</button>
<button
className="testsub"
onClick={() => {
colorDispatch({ type: "Purple" })
}}
>
Purple
</button>
<button
className="testsub"
onClick={() => {
colorDispatch({ type: "Yellow" })
}}
>
Yellow
</button>
<button
className="testsub"
onClick={() => {
colorDispatch({ type: "White" })
}}
>
White
</button>
<br />
{/* Hilts */}
<button className="testsub" onClick={onHiltClick} value="DoubleSaber">
Darth Maul
</button>
<button className="testsub" onClick={onHiltClick} value="QuiGon">
Qui Gon
</button>
<button className="testsub" onClick={onHiltClick} value="ObiWanNew">
Obi Wan
</button>
<button className="testsub" onClick={onHiltClick} value="ObiWanOld">
Obi Wan Old
</button>
<button className="testsub" onClick={onHiltClick} value="Ahsoka">
Ahsoka Tano
</button>
<button className="testsub" onClick={onHiltClick} value="Anakin">
Anakin
</button>
<button className="testsub" onClick={onHiltClick} value="Vader">
Vader
</button>
<button className="testsub" onClick={onHiltClick} value="Kylo">
Kylo
</button>
.....
)
}
export default App;