How to decleare multiple state variables using loop - react state hook

Question

I want to declare some state variable like: processId_1, processId_2, processId_3..... processId_n.

const [processId, setProcessId] = useState(0) ; I just want to use loop on the code to declare these variable. Something like that:

for (let index = 0; index < 30; index++) {
    const [processId["".concat("_",index)], setProcessId]["".concat("_",index)] = useState(0);
    
}

I also want to send them as props. How to do that.

Answer 1

It is possible to create an array of these states. So code would look like this:

const [processIds, setProcessIds] = useState([
    {
      id: '1',
      name: 'processId 1'
    },
    {
      id: '2',
      name: 'processId 2'
    }
]);

const handleClick = () => {
  setProcessIds([...processIds].map(pr => {
        if(pr.id === '1') {
          return {
            ...pr,
            name: 'processId is edited'
          }
        }
        else return pr;
      }))
}

<button onClick={handleClick}>
</button>

UPDATE:

It is possible to add keys into object dynamically like this:

const  obj = {};

for (let i = 10; i <= 20; i++) {
    obj['processId_' + i] = 0;
} 

An example:

 const obj = {}; for (let i = 10; i <= 20; i++) { obj['processId_' + i] = 0; } console.log(obj)