React Sidenav - Bootstrap 4 & Material Design not working

Question

I have tried to implement the Sidebar with navigation from mdbreact to use bootstrap and material design.

I have just copy pasted the code from the example from: https://mdbootstrap.com/docs/react/navigation/sidenav/

import React from 'react';
import { MDBIcon, MDBSideNavCat, MDBSideNavNav, MDBSideNav, 
         MDBSideNavLink, MDBContainer, MDBRow, MDBBtn } from 'mdbreact';

class SideNav extends React.Component {
  constructor(props) {
  super(props);
  this.state = {isOpen: false};

  this.handleToggle = this.handleToggle.bind(this);
 }

 state = {
    isOpen: false
 };

 handleToggle() {
    this.setState({ isOpen: !this.state.isOpen });
 }

 render() {

 return (
  <MDBContainer>
    <MDBRow>
      <MDBBtn onClick={this.handleToggle}><MDBIcon icon="bars" size="5x" /></MDBBtn>
    </MDBRow>
    <MDBSideNav
      logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
      hidden
      triggerOpening={this.state.isOpen}
      breakWidth={1300}
      className="deep-purple darken-4"
    >
      <li>
        <ul className="social">
          <li>
            <a href="#!">
              <MDBIcon icon="facebook" />
            </a>
          </li>
          <li>
            <a href="#!">
              <MDBIcon icon="pinterest" />
            </a>
          </li>
          <li>
            <a href="#!">
              <MDBIcon icon="google-plus" />
            </a>
          </li>
          <li>
            <a href="#!">
              <MDBIcon icon="twitter" />
            </a>
          </li>
        </ul>
      </li>
      <MDBSideNavNav>
        <MDBSideNavCat
          name="Submit blog"
          id="submit-blog"
          icon="chevron-right"
        >
          <MDBSideNavLink>Submit listing</MDBSideNavLink>
          <MDBSideNavLink>Registration form</MDBSideNavLink>
        </MDBSideNavCat>
        <MDBSideNavCat
          name="Instruction"
          id="instruction"
          icon="hand-pointer-o"
          href="#"
        >
          <MDBSideNavLink>For bloggers</MDBSideNavLink>
          <MDBSideNavLink>For authors</MDBSideNavLink>
        </MDBSideNavCat>
        <MDBSideNavCat name="About" id="about" icon="eye">
          <MDBSideNavLink>Instruction</MDBSideNavLink>
          <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
        </MDBSideNavCat>
        <MDBSideNavCat name="Contact me" id="contact-me" icon="envelope-o">
          <MDBSideNavLink>FAQ</MDBSideNavLink>
          <MDBSideNavLink>Write a message</MDBSideNavLink>
        </MDBSideNavCat>
      </MDBSideNavNav>
    </MDBSideNav>
  </MDBContainer>
);
}
}

export default SideNav;

I'm getting a long error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I think it something in the but i'm not sure, anybody having the some problem? Thanks in advance.

Answer 1

I just found the answer to the question. You have to buy the pro version to use the SideNav. I overlook the red tag.