<NavigationBar/> in App.js gives this Error :Elemement type is invalid

Question

I have some troubles with my NavigationBar in my React website.

I have created a NavigationBar.js file and imported it in my App.js, but when I include the

> <NavigationBar/>

in my App.js i get this error:

picture of error message

Here is my NavigationBar.js:

import React from 'react';
import {Nav, Navbar} from 'react-bootstrap';
import styled from 'styled-components';


const Styles = styled.div`
.navbar {
background-color: #222;
}

.navbar-brand, .navbar-nav .nav-link{
color: #bbb;

   &:hover{
      color: white;
    }
}
`;

export const NavigationBar = () => (
    <Styles>
        <Navbar expand = "lg">
            <Navbar.Brand href="/">Code life</Navbar.Brand>
            <Navbar.Toggle aria-controls = "basic-navbar-nav"/>
            <Navbar.Collapse id="basic-navbar-nav">
            <Nav classname="ml-auto">
                <Nav.Item><Nav.link href="/">Home</Nav.link></Nav.Item>
                <Nav.Item><Nav.link href="/about">About</Nav.link></Nav.Item>
                <Nav.Item><Nav.link href="/contact">Contact</Nav.link></Nav.Item>
                <Nav.Item><Nav.link href="/resume">Resume</Nav.link></Nav.Item>
                <Nav.Item><Nav.link href="/photos">Photos</Nav.link></Nav.Item>
            </Nav>
            </Navbar.Collapse>
        </Navbar>
    </Styles>
)

And my App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Home } from "./Components/Home";
import { About } from "./Components/About";
import { Contact } from "./Components/Contact";
import { Resume } from "./Components/Resume";
import { Photos } from "./Components/Photos";
import { NoMatch } from "./Components/NoMatch";
import {NavigationBar} from "./Components/NavigationBar";
import {Layout} from "./Layouts/Layout";

const Header = () => <h1>KSH</h1>;

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Header/>
        <NavigationBar/>
      <Layout>
        <Router>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
            <Route path="/resume" component={Resume} />
            <Route path="/photos" component={Photos} />
            <Route component={NoMatch} />
          </Switch>
        </Router>
        </Layout>
      </React.Fragment>
    );
  }
}

export default App;

Here is link to CodeSandBox: https://codesandbox.io/embed/determined-mendel-sto4x?fontsize=14&hidenavigation=1&theme=dark

I just don't know how to solve this problem and what the reason is...

Thank you for the help in advance. :)

Answer 1

You can do the function like this to work

 export const NavigationBar = () => (
        <Styles>
            <Navbar expand = "lg">
                <Navbar.Brand href="/">Code life</Navbar.Brand>
                <Navbar.Toggle aria-controls = "basic-navbar-nav"/>
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav classname="ml-auto">
             
              <Nav.Item><Nav.Link href="/">Home</Nav.Link></Nav.Item>
              <Nav.Item><Nav.Link href="/about">About</Nav.Link></Nav.Item>
              <Nav.Item><Nav.Link href="/contact">Contact</Nav.Link></Nav.Item>
              <Nav.Item><Nav.Link href="/resume">Resume</Nav.Link></Nav.Item>
              <Nav.Item><Nav.Link href="/photos">Photos</Nav.Link></Nav.Item>
            </Nav>
          </Navbar.Collapse>
            </Navbar>
        </Styles>
    )