Topic: Navbar error with React 16.3.1

Josh Muir free asked 4 years ago


I am using the top example Navbar:

import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, Fa, NavLink } from '../MDB';

class FixedNavbar extends Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
isWideEnough: false
};
this.onClick = this.onClick.bind(this);
}

onClick(){
this.setState({
collapse: !this.state.collapse,
});
}

render() {
const bgPink = {backgroundColor: '#ec407a'};
return (
<div>
<Navbar style={bgPink} dark expand="md" scrolling fixed="top">
<NavbarBrand href="/">
<strong>Navbar</strong>
</NavbarBrand>
{ !this.state.isWideEnough && <NavbarToggler onClick={this.onClick } />}
<Collapse isOpen = { this.state.collapse } navbar>
<NavbarNav left>
<NavItem>
<NavLink to="#">Home</NavLink>
</NavItem>
<NavItem>
<NavLink to="#">Features</NavLink>
</NavItem>
<NavItem>
<NavLink to="#">Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink to="#">Options</NavLink>
</NavItem>
</NavbarNav>
<NavbarNav right>
<NavItem>
<NavLink to="#"><Fa icon="facebook"/></NavLink>
</NavItem>
<NavItem>
<NavLink to="#"><Fa icon="twitter&qgt;"/></NavLink>
</NavItem>
<NavItem>
<NavLink to="#"><Fa icon="instagram"/></NavLink>
</NavItem>
</NavbarNav>
</Collapse>
</Navbar>

</div>
);
}
}

export default FixedNavbar;

```

I get the following error in Chrome dev console from React:

warning.js:33 Warning: Received `true` for a non-boolean attribute `left`.

If you want to write it to the DOM, pass a string instead: left="true" or left={value.toString()}.
in ul (created by NavbarNav)
in NavbarNav (created by FixedNavbar)
in div (created by Collapse)
in Collapse (created by FixedNavbar)
in nav (created by Navbar)
in Navbar (created by FixedNavbar)
in div (created by FixedNavbar)
in FixedNavbar (created by App)
in div (created by App)
in App

 

How can I fix this?

React version: 16.3.1

MDB React version: 4.5.0

Thanks.

 


Anna Morawska staff commented 4 years ago

Hi, Josh Muir, thank you for posting this question. Please, download from github our latest version of MDB React Free. It should fix the problem.

Josh Muir free commented 4 years ago

Thank you for fixing this.

Anna Morawska staff commented 4 years ago

You're welcome Best, Anna


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags