How can I toggle a boolean value inside an array which is a state in react?

Question

const [isShown,setIsShown]=React.useState([false,"Hide"])

function toggleIsShown(){
    setIsShown(prev=>{
        prev[0]=!prev[0]
        return prev
    })
}

since I am a beginner react learner, I cannot grasp the idea of changing states. This is why I am struggling with the problem above. Again, when I press a certain button, I want to toggle the first element of "isShown"

Please try this: `setIsShown(prev => ([ !prev[0], prev[1]]));` — jsN00b, Mar 29 '22 at 15:42
Why you want an array for this particular case? Isn't it better to be an object? `useState({showing: false, status: 'hidden'})` So that even if you visit the code after a year you can understand what you have done here — Khant, Mar 29 '22 at 15:53

score 1 · Answer 1 · answered Mar 29 '22 at 15:46

You could do this:

function toggleIsShown(){
  setIsShown([!isShown[0], isShown[1]]);
}

But overall this array of values is just going to lead to more confusion and problems. Are these two values even related? If not, separate them:

const [isShown,setIsShown] = React.useState(false);
const [someText,setSomeText] = React.useState("Hide");

Then toggling is semantically simpler:

function toggleIsShown(){
  setIsShown(!isShown);
}

Or if these values are related, create a semantically meaningful object:

const [shownInfo,setShownInfo] = React.useState({ isShown: false, someText: "Hide" });

And update the property by name:

function toggleIsShown(){
  setShownInfo({ ...shownInfo, isShown: !shownInfo.isShown });
}

The point is that arrays are not the right structure for grouping together random values. An array should represent a collection of some particular thing. These values you have are either unrelated (should be separate) or have some kind of semantic meaning in their relation (should be an object with named properties).

score 0 · Answer 2 · answered Mar 29 '22 at 15:43

Duplicate the state, make your adjustment, and set:

setIsShown(prev => {
    const clone = [ ...prev ];
    clone[0] = !clone[0];

    return clone;
});

Try it:

const { useState } = React;

const Example = () => {

    const [isShown,setIsShown] = useState([ false, "Hide" ])

    function toggleIsShown(){
        setIsShown(prev => {
            const clone = [ ...prev ];
            clone[0] = !clone[0];

            return clone;
        });
    }
    
    return (  
        <div>
            <button onClick={toggleIsShown}>Toggle</button>
            {
              (isShown[0])
                ? <em>Element is shown</em>
                : null
            }
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

How can I toggle a boolean value inside an array which is a state in react?

2 Answers2