javascript - How to target a list of DOM elements within React

Question

So I'm currently doing Brad Traversys 50 projects in 50 days, but I wanted to do it built in Next.js with React for practice, as that's what I use at my job.

As you can see from me posting here, it's not going so well! I'm already running into road blocks.

I'm trying to create a set of cards, that when one is clicked, it expands out. Outside this, if there is a card already expanded, and another card is clicked, I need the previously expanded card to collapse, whilst the card currently clicked expands.

I'm currently trying to work off an active state, and passing that down to the Panel props, but obviously that just sets all the flex's to be the same and nothing happens. But when I try to define the active useState inside the Panel component, it works, but I can't then target the other active states in the other Panels, to set them to false.

You can see my code on this CodeSandbox https://codesandbox.io/s/nifty-goldberg-5noi4?file=/pages/expanding-cards.jsx

You can see the correct functionality here https://50projects50days.com/projects/expanding-cards/

What's the best way to go about this?

question from:https://stackoverflow.com/questions/65931162/how-to-target-a-list-of-dom-elements-within-react

Answer 1

You need a logic like Accordion control in Material UI. As in my comment, here is the example.

https://material-ui.com/components/accordion/#controlled-accordion