Within a component I'm attempting to "hide" and "show" elements as a user clicks through content. I was told ternary operators are the way to do this. However now it's getting far more complicated / messy due to nested ternary operators.
Is this the correct approach in React or is there a better way?
Example:
const [compltedWaveOne, setcompltedWaveOne] = useState(false);
const [compltedWaveTwo, setcompltedWaveTwo] = useState(false);
const [compltedWaveThree, setcompltedWaveThree] = useState(false);
const [compltedWaveFour, setcompltedWaveFour] = useState(false);
{compltedWaveOne ?
...Large amount of content
: //else
...Large amount of content
}
... Now I need more content here if completedWaveTwo is true etc. Also need to hide the other content
Ternary operators are great IMO, but they get messy once you start nesting. That is why you wanna do something like this:
if(compltedWaveOne) {
return ([CONTENT]) // you can use your ternary op. here
} else {
return ([CONTENT])
}
I would recommend better naming conventions rather than compltedWaveOne
Your useState is not valid since you name both variables the same.
Stick to this type of convention:
const [state, setState] = useState()
Rather than using multiple state, you could simply use an array and map with respect to the component.
const WavesComponents = [Wave1, Wave2, Wave3, Wave4, Wave5];
function _App() {
const [waves, setCompletedWaves] = useState([0, 0, 0, 0, 0]);
function toggleCompletion(idx) {
setCompletedWaves(prev => {
prev.slice();
prev[idx] = !prev[idx];
return prev;
});
}
const WaveComponent = WavesComponents[waves];
return <WaveComponent data={} />;
}