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) {
this.state = {
collapse: false,
isWideEnough: false
this.onClick = this.onClick.bind(this);

collapse: !this.state.collapse,

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


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



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.


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


Specification of the issue

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