Topic: Warning: React does not recognize the `isOpen` prop on a DOM element.

master@mastersistemas.net pro asked 4 years ago


Good afternoon, I'm getting an alert and I can not get rid of it. My code:
 <SideNav isOpenWithButton={isOpenWithButtonA} breakWidth={991} className={this.props.color}>

                    <img src={logo} alt="Logo" className="ml-5 mt-4"></img>

                    <SideNavNav>

                        <div className="col-lg-12">

                            <form className="form-inline md-form form-sm">

                                <i className="fa fa-search" aria-hidden="true"></i>

                                <input className="form-control form-control-sm ml-3 w-75 input-search white-text" type="text" placeholder="Pesquise..." />

                            </form>

                        </div>

                        <Link className="mt-3" to={Front + '/financeiroMenu'}><h4 className="grey-text"> Home</h4></Link>

                        <SideNavCat name="Cadastro" onClick={this.onClick} isOpen={this.state.accordionSideNav === 0}>

                            <Link to={Front + '/financeiroLancamento'}> Lançamento</Link>

                            <Link to={Front + '/financeiroBanco'}>Banco</Link>

                            <Link to={Front + '/financeiroPagamento'}>Forma de Pagamento</Link>

                            <Link to={Front + '/financeiroCondicao'}>Condição de Pagamento</Link>

                        </SideNavCat>

                        <SideNavCat name="Consultas" onClick={this.onClick1} isOpen={this.state.accordionSideNav === 1}>

                            <SideNavItem>LIVRO Caixa</SideNavItem>

                            <SideNavItem>FLUXO Caixa</SideNavItem>

                        </SideNavCat>

                        <SideNavCat name="Sobre" onClick={this.onClick2} isOpen={this.state.accordionSideNav === 2}>

                            <SideNavItem>Instruction</SideNavItem>

                            <SideNavItem>Monthly meetings</SideNavItem>

                        </SideNavCat>

                        <SideNavCat name="Ajuda" onClick={this.onClick3} isOpen={this.state.accordionSideNav === 3}>

                            <SideNavItem>FAQ</SideNavItem>

                            <SideNavItem>Write a message</SideNavItem>

                        </SideNavCat>

                    </SideNavNav>

                </SideNav>


Warning:
index.js:2178 Warning: React does not recognize the `isOpen` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isopen` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div
in Manager
in Dropdown (at SideNavbar.js:218)
in li
in NavItem (at SideNavbar.js:217)
in ul
in NavbarNav (at SideNavbar.js:216)
in nav
in Navbar (at SideNavbar.js:187)
in div (at SideNavbar.js:186)
in div (at SideNavbar.js:151)
in SideNavBar (created by Route)
in Route (created by withRouter(SideNavBar))
in withRouter(SideNavBar) (at FinanceiroMain.js:44)
in div (at FinanceiroMain.js:43)
in div (at FinanceiroMain.js:42)
in Router (created by BrowserRouter)
in BrowserRouter (at FinanceiroMain.js:41)
in div (at FinanceiroMain.js:40)
in MainFinanceiro (created by Route)
in Route (at Main.js:29)
in Switch (at Main.js:20)
in div (at Main.js:19)
in Main (at App.js:6)
in div (at App.js:5)
in App (at index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at index.js:12)

Delgermaa Sanjjav free answered 2 years ago


i got solved this issue. just change tag to Navlink because ActiveClassName is just suported Navlink.


Jakub Mandra staff answered 4 years ago


Dropdown doesnt need any props. Thanks yujanrichie for pointing out. We have to update documentation.   To get rid of this warning just delete isOpen prop from Dropdown.   Best, Jakub

yujanrichie free answered 4 years ago


I have the same issue when using (exact copy) of your

Double Navigation with hidden SideNav & fixed Navbar

I think it's pointing to the "isOpen" prop passed to the Dropdown component. Following the suggestion and changing it to "isopen", I get this: Warning: Received `false` for a non-boolean attribute `ispen`. If you want to write it to the DOM, pass a string instead: ispen="false" or ispen={value.toString()}.

netnovation18 pro answered 4 years ago


I have the same issue, when can you fix him? I dont want to see errors in my code jajaja, thanks!

Jakub Mandra staff commented 4 years ago

Hi there, We will address this problem in this iteration (will be released in 2 weeks from now). Regards, Jakub

Jakub Mandra staff commented 4 years ago

For now you have to use SideNavCat as a wrapper...

netnovation18 pro commented 4 years ago

Really? Yeah i see the problem now... If i use sidenavcat the problem is gone but i dont want that, im gonna wait for the update to see it, thanks!

Jakub Mandra staff commented 4 years ago

Problem has already been solved, solution will be out within release in next Monday. Regards, Jakub

Jakub Mandra staff answered 4 years ago


Source of the error: SideNavNav iterates through it's children, clones them and adds prop isOpen. So the direct child of the SideNavNav has to be SideNavCat.   Thanks for posting your observations, it really helped. We'll refactor this component soon.   Best, Jakub

stephenr pro answered 4 years ago


Actually, changing SideNavLink to straightforward <a> tags also shows the problem. Embedding SideNavLink under SideNavCat works as expected. Steve  

stephenr pro answered 4 years ago


I experience exactly the same issue. It appears to be down to the use of SideNavLink. <li><SideNavLink to="/Admin">Dashboard</SideNavLink></li> <li><SideNavLink to="/Admin/Experiments">Experiments</SideNavLink></li> The above code will cause the warning when used in the following: return <SideNav breakWidth={1300} triggerOpening={props.sideNavOpen} mask="strong"> <SideNavNav> <li> <SideNavLink to="/Admin">Dashboard</SideNavLink> </li> <li> <SideNavLink to="/Admin/Experiments">Experiments</SideNavLink> </li> <SideNavCat name="Submit blog" id="submit-blog-cat" icon="chevron-right"> <SideNavItem>Submit listing</SideNavItem> <SideNavItem>Registration form</SideNavItem> </SideNavCat> <SideNavCat name="Instruction" id="instruction-cat" icon="hand-pointer-o"> <SideNavItem>For bloggers</SideNavItem> <SideNavItem>For authors</SideNavItem> </SideNavCat> <SideNavCat name="About" id="about-cat" icon="eye"> <SideNavItem>Instruction</SideNavItem> <SideNavItem>Monthly meetings</SideNavItem> </SideNavCat> <SideNavCat name="Contact me" id="contact-me-cat" icon="envelope-o"> <SideNavItem>FAQ</SideNavItem> <SideNavItem>Write a message</SideNavItem> </SideNavCat> </SideNavNav> </SideNav>;   This is using MDB React 4.8   Regards,   Steve    

Jakub Mandra staff answered 4 years ago


Hello, I'm not sure what causes the problem. It certainly isn't SideNavCat, and error log looks a little messy
in a (created by t)
in t (created by t)
I see that you also use Navbar, so maybe you have Dropdown with isOpen prop somewhere?   Regards, Jakub

master@mastersistemas.net pro commented 4 years ago

Hello, I have already checked all the code and nowhere do I use "isOpen. I will wait for the update on day 10 to see if it resolves.

master@mastersistemas.net pro commented 4 years ago

Good morning, I updated my package today, but I continue with the "isOpen" alert, how can I solve this?


Good morning, sorry for the delay to give you an answer. I'm using the version: "version": "4.7.0", I changed my code as you requested, but I still get the alert.
index.js:2178 Warning: React does not recognize the `isOpen` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isopen` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in a (created by t)
in t (created by t)
in t (created by d)
in d (created by t)
in t (at App.js:86)
in ul (created by t)
in li (created by t)
in t (at App.js:85)
in ul (created by t)
in div (created by t)
in Unknown (created by t)
in t (created by t)
in div (created by t)
in t (at App.js:83)
in div (at App.js:45)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:44)
in App (at index.js:11)

This is the line he accuses.
https://ibb.co/dBgCVK


I have another question in the forum that is showing "Click" on the console.

I've been warned, it's a versioning bug, so the "isOpen" problem might be related to the same reason?

https://mdbootstrap.com/support/react/appearing-click-on-the-console/

master@mastersistemas.net pro commented 4 years ago

It is confusing to edit texts in your forum, could follow the git pattern

Jakub Mandra staff answered 4 years ago


Hello,   We have release new version of MDB React. Please make sure that you are running with newest package. Here is the documentation for SideNav (it is not using 'isOpen' from now): https://mdbootstrap.com/react/advanced/sidenav/   Best, Jakub from MDB

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: NO
  • Browser: NO
  • OS: NO
  • Provided sample code: No
  • Provided link: No
Tags