Usage of legacy context API

[thetric]

• components: TabPane, Dropdown(,Item,Menu,Toggle), Manager, PopperTargetHelper, CarousellItem (see https://github.com/reactstrap/reactstrap/search?q=contextTypes&unscoped_q=contextTypes)
• reactstrap version 6.5.0
• import method: es
• react version 16.7.0
• bootstrap version 4.2.1

What is happening?

When using <React.StrictMode> Reacts advises against using the legacy context API:

Warning: Legacy context API has been detected within a strict-mode tree: 
    in StrictMode (at App.tsx:27)
    in App (at src/index.tsx:7)

Please update the following components: Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Manager

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

From https://reactjs.org/docs/context.html#legacy-api:

React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. [...]

What should be happening?

Reactstrap should be using the new Context API.

Steps to reproduce issue

Wrap an example app using some of the components mentions at the beginning in React.StrictMode and start it in development mode.

Code

https://stackblitz.com/edit/reactstrap-saxswj?file=Example.js

[thetric]

The Modal component uses deprecated lifecycle hooks:

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Modal

componentWillUpdate: Please update the following components to use componentDidUpdate instead: Modal

[gergely-nagy]

I'll submit a PR for it!

[iegik]

Duplicate of https://github.com/reactstrap/reactstrap/issues/1159

[armenzg]

@gergely-nagy any progress?

[jonathan-richer]

Same thing on Collapse:

[sumanthratna]

I got this warning with Tooltip, if that helps.

[MA-Ahmad]

I got this warning with Carousel.

[iamandrewluca]

Anyone interested in fixing this? Here Is a starting point https://github.com/reactstrap/reactstrap/pull/1866 One test is failing. I can't alocate more time.

[kindyALkindy]

I got this warning with Tooltip

[rmlevangelio]

Also happening in Fade component

[ka-dev12]

I got this warning with Collapse navbar.

[hauchongtang]

Got this warning in in Transition (created by Collapse) in Collapse (at AppNavbar.js:24) in div (created by Container) in Container (at AppNavbar.js:21) in nav (created by Navbar) in Navbar (at AppNavbar.js:20) in div (at AppNavbar.js:19) in AppNavbar (at App.js:10) in div (at App.js:9) in App (at src/index.js:8) in StrictMode (at src/index.js:7)

[iamandrewluca]

We know about this issue.

Legacy context is used only in Carousel right now, no other places.

All other warnings come from components that use react-transition-group, if you enable StrictMode, because it uses deprecated findDOMNode API

There is no more reasons to post about it.

[vishaloswal]

Same thing on Collapse:

Even I get similar warning, is there a work around or fix for this?

[SumitJadiya]

Workaround: Remove strictMode from index.js

[xreider]

It is not resolved yet

[iamandrewluca]

@xreider do you want to help fixing it?

[manhddse03539]

In index.js change React.StrictMode toReact.Fragment @@

[chauger]

Alert is causing this issue for me

[adamf1631]

switch to <React.Fragment> in index.js

[iamandrewluca]

React.Fragment is not an alternative for React.StrictMode 🙂

[d3ce1t]

@iamandrewluca CMIIW the problem comes from react-transition-groups (as you said). Reactstrap is using that library at version 2.9.0. But last version is 4.4.1. Would it still happen in a more recent version? What's blocking reactstrap from updating?

[thetric]

My guess is that the author wants to support React < 16.3 which has no the new Context API. But react-transition-groups@3 requires the new Context API

[iamandrewluca]

We don't have time to allocate for this. And because this will be a breaking change, we thought of making multiple breaking changes at a time. But for that we have to allocate a lot of time, which we don't have.

[adamf1631]

Yes, I found this warning as well, if you boys have any suggestions please step up and suggest. Thanks!

[mazharvai007]

Same problem I'm facing when using Collapse from reactstrap. Is there any solution? Thanks

[CleverOscar]

Has this issue really been on for more than two years? I keep getting an error when using the Carousel component

[dogukankutluay]

İndex.js değişikliklerinde React.StrictModeiçin React.Fragment@@

thankx :)

[musasahinkundakci]

React.Fragment if you are beginner you can use it temporily :)

[fsogutcen]

Deleting "<React.Fragment>" in the index.js file may also be effective. I chose to use it this way to solve it; " ReactDOM.render(<App />,document.getElementById('root')); "

But since I'm newbie to React, I'm not sure how the right step is