How to create dynamic state in for loop?

Question

I have arrays of colors, with each color I have a gallery. I want to create and manage state for these galleries, so I can add/remove image for gallery easy.

I have code like this

var imgArr = new Array(colors.length)
for (var i = 0; i < colors.length; i++) {
    imgArr[i] = colors[i].imgs
    const [gallery[i], setGallery[i]] = React.useState()
    setGallery[i](imgArr[i])
}

but const [gallery[i], setGallery[i]] = React.useState() doesn't work.

How to resolve this issue?

Does this answer your question? Calling setState in a loop only updates state 1 time — Randy Casburn
– Randy Casburn, Commented Feb 2, 2021 at 15:58
I need to create multiple state, not just call setState in the loop. — Kien Pham
– Kien Pham, Commented Feb 2, 2021 at 16:04
I believe the message in almost every single one of those many, many duplicate questions is this: Don't set state in a loop. Best of luck to you. — Randy Casburn
– Randy Casburn, Commented Feb 2, 2021 at 16:05
I got it, it's complicated for me, but I will try to use a state to manage them all. — Kien Pham
– Kien Pham, Commented Feb 4, 2021 at 2:48

Viet · Accepted Answer · 2021-02-02 16:34:21Z

1

Don't write this inside a loop:

const [gallery[i], setGallery[i]] = React.useState()

The syntax is wrong. What you could use is a galleries state like this:

const [galleries, setGalleries] = useState([]);

Then:

setGalleries(colors.map((color) => color.imgs));

Sandbox: https://codesandbox.io/s/stupefied-roentgen-xk9zc?file=/src/App.js:547-600. Hope this answers your question.

answered Feb 2, 2021 at 16:34

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create dynamic state in for loop?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related