Multiple dropdowns not showing options

Question

I'm a beginner in React. I'm using Patternfly Dropdown. The issue I'm facing is when I try to use more than two of the same dropdowns. Then, when I click on them, the options inside are not opening.

I would like to know how I can have multiple dropdowns in the same page by modifying the existing code.

STATE:

 //dropdown menu
      this.onToggle = isOpen => {
        this.setState({
          isOpen
        });
      };
      this.onSelect = event => {
        this.setState({
          isOpen: !this.state.isOpen
        });
        this.onFocus();
      };
      this.onFocus = () => {
        const element = document.getElementById('toggle-id-1');
        element.focus();
      };

Under render()

           const dropdownItems = [
       
          <DropdownItem key="action1" component="button" >
            1 Hour
          </DropdownItem>,
           <DropdownItem key="action2" component="button">
           1 Day
         </DropdownItem>,
           <DropdownItem key="action3" component="button">
           1 Week
         </DropdownItem>,
        <DropdownItem key="action4" component="button">
            Never
          </DropdownItem>,
         
        ];

Under Return

<Dropdown
           onSelect={this.onSelect}
           toggle={
          <DropdownToggle id="toggle-id-1" onToggle={this.onToggle}>
            Dropdown
          </DropdownToggle>
        }
        isOpen={isOpen}
        dropdownItems={dropdownItems}
        autoFocus={false}
      />

 <Dropdown
           onSelect={this.onSelect}
           toggle={
          <DropdownToggle id="toggle-id-2" onToggle={this.onToggle}>
            Dropdown
          </DropdownToggle>
        }
        isOpen={isOpen}
        dropdownItems={dropdownItems}
        autoFocus={false}
      />

Answer 1

You are using same state variables for both drop downs. Open your console and check for the errors when you click on the dropdown.

Post them here if possible.