useState to update multiple values in react with one change changing the all the remaining-CodePudding

I've a series of data elements which i am using hooks on.

const [a, setA] = useState(true);
const [b, setB] = useState(false);
const [c, setC] = useState(false);
const [d, setD] = useState(false);

i have used a map to loop through all these four and change them on a click using a function changeOnClick. The function basically reverses the current value and sets the value of all other useStates to false. the function looks like(approach A):

const changeOnClick = (x) => {
    switch (x) {
      case "a":
        setA(!a);
        setB(false);
        setC(false);
        setD(false);
        break;
      case "b":
        setB(!b);
        setA(false);
        setC(false);
        setD(false);
        break;
      .
      .


      default:
        break;
    }
  }

i have tried using these 4 values as an useState object(approach B), i.e.

const [all, setAll] = useState({
   a: true, 
   b: false, 
   c: false, 
   d: false
});

but i can't work out a way to use the changeOnClick function. It obviously works with approach A, but i want to learn a new way to use / make the code look succinct. Would really appreciate the help.

CodePudding user response：

If only one of those states is allowed to be true, then perhaps use a single state and record which feature is active. e.g. setState('a') or setState('b').

I think what you want is to use a curried function. Sorry if there's syntax error, typing this live:

<button onClick={updateState('a')}>AAA</button>
<button onClick={updateState('b')}>BBB</button>
<button onClick={updateState('c')}>CCC</button>
<button onClick={updateState('d')}>DDD</button>

const updateState = (whichState) => (event) => {
   console.log('whichState', whichState)
   console.log('event', event)
   // your code here...
}

CodePudding user response：

One way I can suggest is to create a dummy object in the handler itself.

const clonedAll = {
        a: false,
        b: false,
        c: false,
        d: false,
    };

After that in the handler as you are passing the value x which is the key itself. Modify the setState with de-structuring the object and adding the value true to the key itself.

setAll({
        ...clonedAll,
        [x]: true,
    });

Also assign a default value to x for default value to be true.

CodePudding user response：

One of the ways to update the object using useState() is to recall the prevState (previous State), spread it (... prevState) and change the property you wish in the setter function, like

setAll((prevState) => ({
    ...prevState,
    a : !prevState.a, // or false 
}));

A bit more detailed usage based on your code

const [all, setAll] = useState({
   a: true, 
   b: false, 
   c: false, 
   d: false
}); 


const changeOnClick = (x) => {
    switch (x) {
      case "a": setAll((prevState) => ({
                  ...prevState,
                  a : !prevState.a, // or false 
                 }));
                 break;
      case "b": setAll((prevState) => ({
                  ...prevState,
                  b : !prevState.b, // or false  as you wiss
                 }));
                 break;
      ...
      })

CodePudding user response：

Don't change state like that:

setA(!a);

but like this:

setA((prevState) => !prevState)

Try to read about useReducer

CodePudding user response：

Then probable you should read a Lil More istead of asking. But here Is an option

...
const [data, setData]=useState({});
...

const changeHandler = e => {
 const name = e.target.getAttribute("name");
 const value = e.target.value;

 setData({...data, { [name]: value });
}
...
return (
 <input name="firstName" onChange={changeHamdler}/>

 <input name="lastName" onChange={changeHamdler}/>

 <input name="password" onChange={changeHamdler}/>
);