React bootstrap NavBar not compiling

Question

The code snippet:

import React, { Component } from 'react';
import { Navbar, Nav, NavItem} from 'react-bootstrap';

class Navigation extends Component {
  render(){
    return (

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        Github Searcher
      </Navbar.Brand>
    </Navbar.Header>

    <Nav>
      <NavItem href="#"> Login </NavItem>
    </Nav>
  </Navbar>

    )
  }
}
export default Navigation;

Getting this error message:

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 Navigation.

norbitrial · Accepted Answer · 2020-01-02 15:57:12Z

3

I could reproduce your error message and there are 2 issues what I have found for you.

First issue:

There is a small typo in the import part. You can correct if you change the first line from Import React, { Component } from 'react' to import React, { Component } from 'react'.

Second issue:

Which is related to the Element type is invalid: expected a string error message.

In react-bootstrap documentation I have found the following for NavbarHeader:

removed, not present in v4

So Navbar.Header needs to be removed and it will work like charm.

I guess you can do something like this:

class Navigation extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Brand>
          Github Searcher
        </Navbar.Brand>

        <Nav>
          <NavItem href="#"> Login </NavItem>
        </Nav>
      </Navbar>
    )
  }
}

I hope that helps.

edited Jan 2, 2020 at 15:57

answered Jan 2, 2020 at 15:36

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yahya Rehman Over a year ago

Yes sorry about that; in copy pasting the code this mistake was made in the actual code 'i' is in lower case. And yes after removing Navbar.Header the error is removed. Thankyou

jawad zahoor · Accepted Answer · 2020-01-02 15:51:12Z

0

Import of first line should replace by import. components are not included.

answered Jan 2, 2020 at 15:51

jawad zahoor

971 silver badge7 bronze badges

Collectives™ on Stack Overflow

React bootstrap NavBar not compiling

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related