I'm trying to use a bootstrap drop down: Here's m...

# react

[Paul N]

I'm trying to use a bootstrap drop down:

Here's my wrapper code:

@file:JsModule("react-bootstrap")
@file:JsNonModule

import react.*

@JsName("Dropdown")
external val Dropdown: RClass<DropDownProps>

external interface DropDownProps : RProps {
    var bsClass: String?
    var componentClass: Any?
    var disabled: Boolean?
    var dropup: Boolean?
    var id: String
    var onClose: Function<*>?
    var onSelect: Any?
    var onToggle: ((isOpen: Boolean) -> Unit)?
    var open: Boolean?
    var pullRight: Boolean?
    var role: String?
}

@JsName("DropdownMenu")
external val DropdownMenu: RClass<DropdownMenuProps>

external interface DropdownMenuProps : RProps {
    var labelledBy: dynamic /* String | Number */
    var onClose: Function<*>?
    var onSelect: Any?
    var open: Boolean?
    var pullRight: Boolean?

}

@JsName("DropdownItem")
external val DropdownItem: RClass<DropDownItemProps>

external interface DropDownItemProps : RProps {
    var eventKey: String
    var href: String
}

And here's my component that uses it:

class GroupList: RComponent<GroupListProps, RState>() {
    override fun RBuilder.render() {

        console.log("Dropdown",Dropdown)
        console.log("Dropdown menu is",DropdownMenu)
        console.log("Dropdown item",DropdownItem)
       
        Dropdown {
            DropdownMenu {
                props.groups.forEach {
                    DropdownItem {
                        attrs.eventKey = it.id
                        +it.description
                    }
                }
            }
        }
    }
}

The console log shows DropDownMenu as being undefined (the other two are OK), resulting in my code failing:

DevTools failed to load SourceMap: Could not load content for <chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map>: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
GroupList.kt?2322:20 Dropdown {$$typeof: Symbol(react.forward_ref), displayName: "Dropdown", defaultProps: {…}, Toggle: {…}, render: ƒ, …}
GroupList.kt?2322:21 Dropdown menu undefined
GroupList.kt?2322:22 Dropdown item {$$typeof: Symbol(react.forward_ref), displayName: "DropdownItem", defaultProps: {…}, render: ƒ}
react.development.js?6008:315 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `GroupList`.
    in GroupList (created by App)
    in div (created by styled.div)
    in styled.div (created by App)
    in App

Does anyone know what I'm doing wrong ?

Are there any Kotlin wrappers for basic HTML components such as drop downs etc, or is my approach of writing wrappers from scratch (with a little help from Dukat) the only way ?

[turansky]

In common case declarations couldn’t contain RClass instances

[turansky]

Dropdown.kt

[Paul N]

Sorry, I don't understand what you mean here.