Dropdown Calcite Component not displaying in React

craragon77 — Wed, 26 Jul 2023 18:26:48 GMT

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!

topic Dropdown Calcite Component not displaying in React in ArcGIS JavaScript Maps SDK Questions

Dropdown Calcite Component not displaying in React