Warning: findDOMNode is deprecated in StrictMode when using react-bootstrap Navbar

user_5710696 0
Viewed 19055

I tried to use react-bootstrap's Navbar component in the typescript template and I found below warning in Chrome console.

index.js:1 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.
    in div (created by Context.Consumer)
    in Transition (created by Collapse)
    in Collapse (created by Context.Consumer)
    in NavbarCollapse (at NavigationBar.tsx:10)
    in nav (created by Navbar)
    in Navbar (at NavigationBar.tsx:7)
    in NavigationBar (at App.tsx:8)
    in div (at App.tsx:7)
    in App (at src/index.tsx:10)
    in StrictMode (at src/index.tsx:9)

Below is the code

import React from 'react';
import './NavigationBar.css';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';

function NavigationBar() {
    return (
        <Navbar bg="light" expand="lg">
            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#link">Link</Nav.Link>
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>);
}

export default NavigationBar;

Even the Navbar component's collapse function is working, what should I do to for warning message.

react-bootstrap typescript reactjs
3 Answers

Apparently it's a github issue already. here

Since this is a warning (and not an error) therefore, your app will continue to work just fine. Facebook will eventually deprecate findDOMNode as it blocks certain improvements in React in the future

react-bootstrap will eventually upgrade it's code to drop using findDomNodes for other suitable alternatives.

user_73437310

Best solution for me was to set animation to false as suggested above however, you need to do it with animation="false" NOT animation={false} or you will get another warning. You will also need to add it to the Navbar.Collapse tag so:

<Navbar animation="false" ...>
  ...
  <Navbar.Collapse animation="false" ...>
user_43720630

findDomNode error usually is caused by older component packages for example react-bootstrap is fixing stuff, but already closed the thread because of complaints:

https://github.com/react-bootstrap/react-bootstrap/issues/5075

temporary solution they provide is to set strictmode to false in your app

if it's problem in your own code, try reading this:

https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660

as for navbar collapse do collapseOnSelect:

<Navbar collapseOnSelect bg="light" expand="lg">
user_134500600
Related