Dropdown Calcite Component not displaying in React

208
0
07-26-2023 11:26 AM
craragon77
New Contributor III

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!

0 Kudos
0 Replies