CODEWITHSUNDEEP
reactjsreact-router-dom
AnthonyDa
AnthonyDa

Reputation: 531

React JS Navbar Header Element type is invalid

I'm following this tutorial : https://serverless-stack.com/chapters/create-containers.html and I have an issue with the Navbar.

Here's my code for App.js: 

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes";
import "./App.css";

export default class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
        <Routes />
      </div>
    );
  }
}

Routes.js :

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () =>
  <Switch>
    <Route path="/" exact component={Home} />
  </Switch>;

It compiled successfully but I have this 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.

Check the render method of `App`.

I noticed that if I remove the Navbar.Header part and leave only Navbar it's working.

Any ideas ?

Upvotes: 2

Views: 1274

Answers (1)

Lorenz Henk
Lorenz Henk

Reputation: 781

The tutorial says you should install version 0.32.4 - did you do that? The current version doesn't have a Navbar.Header export anymore.

Upvotes: 1

Related Questions