ReactJS: Warning: setState(…): Cannot update during an existing state transition

Question

I am trying to refactor the following code from my render view:

Answer 1

The solution that I use to open Popover for components is reactstrap (React Bootstrap 4 components).

    class Settings extends Component {
        constructor(props) {
            super(props);

            this.state = {
              popoversOpen: [] // array open popovers
            }
        }

        // toggle my popovers
        togglePopoverHelp = (selected) => (e) => {
            const index = this.state.popoversOpen.indexOf(selected);
            if (index < 0) {
              this.state.popoversOpen.push(selected);
            } else {
              this.state.popoversOpen.splice(index, 1);
            }
            this.setState({ popoversOpen: [...this.state.popoversOpen] });
        }

        render() {
            

                ?
                
                  Header popover
                  Description popover
                

                ?
                
                  Header popover 2
                  Description popover2
                
            
        }
    }