reactjsreactstrap

Error using buttongroup as dropdownitem in Reactstrap

I need a ButtonGroup as a DropdownItem.

 <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
          Dropdown
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem toggle={false}>
            <ButtonGroup>
               <Button>Right</Button>
               <Button>Right</Button>
            </ButtonGroup>
          </DropdownItem>
        </DropdownMenu>
 </Dropdown>

I get the warning: 

warning.js:33 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

How do I resolve this issue?

Solution

  • You cannot have a button rendered inside a button. That said the DropdownItem component has a tag property of "button" by default which means that it will render a button. If you would change the property to tag="h1" on the DropdownItem for instance it would render an h1 instead and you would not have this error. Hope i am clear.