react expand and collapse just one panel

Question

Need help with react... Trying to implement a collapsible list of cards with weather information. Already implemented the behavior of expand and collapse, but w

Answer 1

I would have an object to represent the state, a field for each panel.

Like this:

constructor(props) {
    ...
    this.state = {
      requestFailed: false,
      shown: {}
    }
    ...
}

...

toggle(panelNumber) {
   this.setState({
        shown: {
            ...this.state.shown,
            [panelNumber]: !this.state.shown[panelNumber]
        }
    });
}

...

The toogle function is used like this, for instance, Day 1:

 this.toggle(1)} className="dayWeekItem">
    ...

And to show in html, for instance, Day 1: