Hello all,
I"m having trouble displaying a dropdown calcite component using the React.js framework. In the documentation which i've linked here, the code should look like this...
ReactDOM.render(
<>
<CalciteDropdown>
<CalciteButton>Buttons</CalciteButton>
<CalciteDropdownGroup>
<CalciteDropdownItem>Option 1</CalciteDropdownItem>
<CalciteDropdownItem>Option 2</CalciteDropdownItem>
<CalciteDropdownItem>Option 3</CalciteDropdownItem>
<CalciteDropdownItem>Option 4</CalciteDropdownItem>
<CalciteDropdownItem>Option 5</CalciteDropdownItem>
</CalciteDropdownGroup>
</CalciteDropdown>
</>
, buttonContainer);
however this causes nothing to show up in the parent element called buttonContainer (which is just a div element so i've excluded it from the sample)
What's weird though is that if I remove the Calcite Dropdown parent container and just have a free-floating Calcite Dropdown Group container then it appears on screen. Put another way, the code below makes it show up as expected...
ReactDOM.render(
<>
<CalciteDropdownGroup>
<CalciteDropdownItem>Option 1</CalciteDropdownItem>
<CalciteDropdownItem>Option 2</CalciteDropdownItem>
<CalciteDropdownItem>Option 3</CalciteDropdownItem>
<CalciteDropdownItem>Option 4</CalciteDropdownItem>
<CalciteDropdownItem>Option 5</CalciteDropdownItem>
</CalciteDropdownGroup>
</>, buttonContainer);
Anyone got any tips for what i'm doing wrong? Thanks y'all!