How To Fix: findDOMNode is deprecated in StrictMode

React
1

Hello everybody!

I’ve worked half way through the great Mastering React course. I’ve started to build a tiny Sudoku game and came to an issue, I did not manage to resolve. First, I wanted to open a Popover when clicking on a game box. This popover should include 9 React components (buttons from 1 to 9) to select the desired number for the selected field. These buttons need onClick methods to return the player’s choice into the game.

Whoever wants to see the game, please click here.

Following this page, I learned, that it is not possible to include (interactive) React components within standard Bootstrap Popovers. They suggest to use reactstrap instead.

So I did. I managed to make it work, all fine. All, but this annoying Warning in the console, when putting my React App in strict mode:

vendors~main.chunk.js:34115 Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Transition

Learn more about this warning here: https://reactjs.org/link/legacy-context
at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:37083:30)
at Fade (http://localhost:3000/static/js/vendors~main.chunk.js:45207:19)
at div
at PopperContent (http://localhost:3000/static/js/vendors~main.chunk.js:48145:30)
at TooltipPopoverWrapper (http://localhost:3000/static/js/vendors~main.chunk.js:49329:30)
at Popover (http://localhost:3000/static/js/vendors~main.chunk.js:47911:98)
at MyButton (http://localhost:3000/static/js/main.chunk.js:52:5)
console.<computed> @ vendors~main.chunk.js:34115
overrideMethod @ react_devtools_backend.js:2430
printWarning @ vendors~main.chunk.js:6663
error @ vendors~main.chunk.js:6639
(anonymous) @ vendors~main.chunk.js:18229
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushLegacyContextWarning @ vendors~main.chunk.js:18214
flushRenderPhaseStrictModeWarningsInDEV @ vendors~main.chunk.js:30224
commitRootImpl @ vendors~main.chunk.js:29430
unstable_runWithPriority @ vendors~main.chunk.js:52262
runWithPriority$1 @ vendors~main.chunk.js:17920
commitRoot @ vendors~main.chunk.js:29415
performSyncWorkOnRoot @ vendors~main.chunk.js:28757
(anonymous) @ vendors~main.chunk.js:17974
unstable_runWithPriority @ vendors~main.chunk.js:52262
runWithPriority$1 @ vendors~main.chunk.js:17920
flushSyncCallbackQueueImpl @ vendors~main.chunk.js:17969
flushSyncCallbackQueue @ vendors~main.chunk.js:17957
scheduleUpdateOnFiber @ vendors~main.chunk.js:28321
enqueueSetState @ vendors~main.chunk.js:19097
push../node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.chunk.js:39618
MyButton.togglePopover @ main.chunk.js:58
toggle @ vendors~main.chunk.js:49576
show @ vendors~main.chunk.js:49446
setTimeout (async)
showWithDelay @ vendors~main.chunk.js:49455
handleDocumentClick @ vendors~main.chunk.js:49503
vendors~main.chunk.js:34115 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:37083:30)
at Fade (http://localhost:3000/static/js/vendors~main.chunk.js:45207:19)
at div
at PopperContent (http://localhost:3000/static/js/vendors~main.chunk.js:48145:30)
at TooltipPopoverWrapper (http://localhost:3000/static/js/vendors~main.chunk.js:49329:30)
at Popover (http://localhost:3000/static/js/vendors~main.chunk.js:47911:98)
at MyButton (http://localhost:3000/static/js/main.chunk.js:52:5)

What can I do???

This are my steps to reproduce this:

  • npx create-react-app
  • npm i reactstrap (which installed + reactstrap@8.9.0)
  • npm i bootstrap (which installed + bootstrap@4.6.0)

This is my index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import MyButton from "./components/myButton";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <MyButton />
  </React.StrictMode>,
  document.getElementById("root")
);

And this is my example component with the Popover from reactstrap:

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Popover, PopoverHeader, PopoverBody } from "reactstrap";

export default class MyButton extends Component {
  state = {
    popOverOpen: false,
  };

  togglePopover = () => {
    this.setState({ popOverOpen: !this.state.popOverOpen });
  };

  render() {
    const { popOverOpen } = this.state;

    return (
      <React.Fragment>
        <button id="popover1" className="example-popover">
          Test
        </button>
        <Popover
          placement="bottom"
          isOpen={popOverOpen}
          target="popover1"
          toggle={this.togglePopover}
        >
          <PopoverHeader>Popover Headline</PopoverHeader>
          <PopoverBody>
            <h1>Some React Components</h1>
          </PopoverBody>
        </Popover>
      </React.Fragment>
    );
  }
}