reactstrap: UncontrolledDropdown in 8.0.0 does not find toggle function in this.context

components: UncontrolledDrownDown
reactstrap version #8.0.0
import method umd/csj/es
react version #16.4.1
bootstrap version #4.3.1

What is happening?

On clicking the dropdown button in the UncontrolledDropdown component, an unhandled exception is raised and the dropdown menu does not appear.

What should be happening?

On clicking the dropdown button, the dropdown menu should appear.

Steps to reproduce issue

Render the UncontrolledDropdown as provided in the docs
Click on the button
Observe that the dropdown menu does not toggle open and that there is an exception in the consolee.

Error message in console

Uncaught TypeError: this.context.toggle is not a function
    at ProxyComponent.onClick (DropdownToggle.js:59)
    at ProxyComponent.onClick (react-hot-loader.development.js:693)
    at ProxyComponent.onClick (Button.js:52)
    at ProxyComponent.onClick (react-hot-loader.development.js:693)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:483)
    at executeDispatchesAndRelease (react-dom.development.js:581)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
    at forEachAccumulated (react-dom.development.js:562)
    at runEventsInBatch (react-dom.development.js:723)
    at runExtractedEventsInBatch (react-dom.development.js:732)
    at handleTopLevel (react-dom.development.js:4477)

Code

<UncontrolledDropdown>
                <DropdownToggle caret>
                    Dropdown
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header>Header</DropdownItem>
                    <DropdownItem disabled>Action</DropdownItem>
                    <DropdownItem>Another Action</DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>Another Action</DropdownItem>
                </DropdownMenu>
            </UncontrolledDropdown>

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 22 (7 by maintainers)

Most upvoted comments

Thanks to @leighmetzroth

I got a fix. I am also using react@16.8.6 with reactstrap@8.0.0 and I was also importing DropdownToggle from reactstrap directly. Adding UncontrolledDropdown as per example given by @leighmetzroth helped me out.

Earlier:

<DropdownToggle nav>
  <img src={avatar} className="img-avatar" alt="admin" />
</DropdownToggle>

Fixed code:

<UncontrolledDropdown>
  <DropdownToggle nav>
    <img src={avatar} className="img-avatar" alt="admin" />
  </DropdownToggle>
</UncontrolledDropdown>

2yk on Apr 25, 2019

Using your example, I have worked out how to replicate it. It appears to only be an issue if you’re importing the DropDownToggle (or DropDownMenu) directly out of the lib folder.

Here is the modified stackblitz with the issue: https://stackblitz.com/edit/reactstrap-v8-j1pprd?file=Example.js

I am running react@16.8.6 and also had the issue with reactstrap@8.0.0 (there is no way I could be running an earlier version of react as I’m using hooks quite extensively).

So the simple “fix” is just to change how you do the imports for reactstrap.

leighmetzroth on Apr 24, 2019

@TheSharpieOne and also I make sure the version of react-dom is 16.8.+

That’s works for me! thank you @TheSharpieOne !

canotech on Apr 30, 2019

@canotech the dropdown in your example works perfectly: https://stackblitz.com/edit/reactstrap-v8-n8zlcz?file=Example.js

Make sure the version of react you are using is 16.6+

TheSharpieOne on Apr 30, 2019

It turns about the minimum supported version for the way context is being consumed within DropdownToggle is react 16.6 which would explain why it works in newer version of react and not the 16.4 version reported here. I know the minimum version of react listed in peerDeps for this project is 16.3, but we will need to bump that (Or change the way we consume the context.). I would prefer to change the way the context is consumed to support a more broad range of react versions (if anyone want to submit a PR).

For everyone reporting this issues while using the latest version of react, please provide an example using stackblitz or something similar as I cannot reproduce it in the latest version of react. (see my sample: stackblitz.com/edit/reactstrap-v8-6oafs2?file=Example.js) Chances are that you are not using the version of react you think you are using.

TheSharpieOne on Apr 24, 2019

This works with the latest version of react: https://stackblitz.com/edit/reactstrap-v8-6oafs2?file=Example.js

I can confirm that I am gettin the same error when using react@16.4.1. We’ll have to look into it.

For now, the suggested workaround is to upgrade react to 16.8 if you can.

TheSharpieOne on Apr 8, 2019