Iterate through getter and setter react state hooks

Question

In a react component that uses state hooks to expose several state properties, is there a way to iterate through all of the state properties and potentially change them? The issue is that I have lots of state properties, so I'd rather not hard-code all the getters and setters to iterate over the state properties.

In this example, let's say that all of my state properties have a default of 0, and if they are different, I'd like to do something. How do I loop over the state properties?

const exampleComponent = () => {

  const [prop1, setProp1] = React.useState(0);
  const [prop2, setProp2] = React.useState(0);
  const [prop3, setProp3] = React.useState(0);
  //...etc., lots of properties

  // Loop over the properties. How should this loop be written?
  Object.keys(this.state).map(function (key) {
    // do something with each key-value pair here
  });

Answer 1

An alternative is to assign the states that you want into an array and then destructure them into named constants (if required) and enumerate the states array. See example below:

const exampleComponent = () => {
  const states = [React.useState(0), React.useState(0), React.useState(0)];
  const [
    [prop1, setProp1],
    [prop2, setProp2],
    [prop3, setProp3],
  ] = states;

  // Loop over the properties.
  states.forEach(([state, setState]) => {
    // do something with each key-value pair here
  });
}

Answer 2

If you need to loop over the properties, I'd use an array for state instead:

const [numArr, setNumArr] = useState([0, 0, 0]);
// ...
numArr.forEach((num, i) => {
  // do something with each key-value pair here
});

Answer 3

If you have lots of states that are related to each other, then instead of having each state separately, you might be better off using the useReducer hook.

EDIT: Apologies, I should have mentioned this earlier that handling state with useReducer hook can be a bit verbose and may be complex if one is not familiar with it.

Here is an example, where instead of having three separate states, we have one state object with three properties, when UPDATE_ACTION1 is dispatched, the code loops over the properties and all the relevant ones are incremented by 2.

//define some actions 
const UPDATE_ACTION1 = "UPDATE_ACTION1";
const UPDATE_ACTION2 = "UPDATE_ACTION2";

//define a reducer function that will update the state
const objReducer = (state, action) => {
  switch (action.type) {
    case UPDATE_ACTION1:
      const keys = Object.keys(state);
      const newState = {};
      keys.forEach(key => {
        //perform any function on each property/key
        //here we just increment the value of each property by the given value
        if (key !== "isValid") {
          newState[key] = state[key] + action.value;
        }
      });
      return newState;

    case UPDATE_ACTION2:
      //do something else e.g. check validity and return updated state
      return { ...state, isValid: true };
    default:
      return state;
  }
};


//inside the component: call useReducer and pass it the reducer function and an initial state
//it will return the current state and a dispatch function
const [objState, dispatch] = useReducer(objReducer, {
   prop1: 0,
   prop2: 0,
   prop3: 0
});

//somewhere in your code, dispatch the action. it will update the state depending upon the action.  
const somethingHappens = () => {
   //some other operations are performed here
   dispatch({ type: UPDATE_ACTION1, value: 2 });
};