CODEWITHSUNDEEP
reactjsmeteor
Thilina Sampath
Thilina Sampath

Reputation: 3773

Uncaught ReferenceError: Navbar is not defined

I develop react + meteor app, then I got error like this,

enter image description here

I try to add navigation https://react-bootstrap.github.io/components.html#navigation, get data in this tutorial . I try to add this const like below way

MainComponent

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Button } from 'react-bootstrap';

import AccountsUIWrapper from './AccountsUIWrapper.jsx';

// App component - represents the whole app
export default class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            hideCompleted: false,
        };
    }

    render() {
        const navbarInstance = (
            <Navbar>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="#">React-Bootstrap</a>
                    </Navbar.Brand>
                </Navbar.Header>
                <Nav>
                    <NavItem eventKey={1} href="#">Link</NavItem>
                    <NavItem eventKey={2} href="#">Link</NavItem>
                    <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                        <MenuItem eventKey={3.1}>Action</MenuItem>
                        <MenuItem eventKey={3.2}>Another action</MenuItem>
                        <MenuItem eventKey={3.3}>Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey={3.4}>Separated link</MenuItem>
                    </NavDropdown>
                </Nav>
            </Navbar>
        );

        return (
            <div>
                {navbarInstance}

                <div className="container">
                    <div className="row">
                        <div className="navbar nav-inline">
                            <AccountsUIWrapper />
                        </div>
                    </div>

                    <header>
                        <h1>School Attendance</h1>
                        <h3>Lecturer Report</h3>
                    </header>

                    <h4>This is home</h4>
                </div>
            </div>
        );
    }
}

but I got bellow error. and there reason as like me.

There add some import 

import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';

like this then vanish the error, but I got like this

enter image description here

I want to correct way to Navbar add

Upvotes: 5

Views: 30484

Answers (2)

Omama Zainab
Omama Zainab

Reputation: 880

firstly install react bootstrap

npm install react-bootstrap bootstrap
// or use yarn
yarn add react-bootstrap bootstrap

also you need to import Navbar as well you can use this code

import Navbar from 'react-bootstrap/Navbar'
// or
import { Navbar } from 'react-bootstrap'

for the styling you need to add bootstrap styles. How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>

Upvotes: 0

awade
awade

Reputation: 96

The classes you call in render are not defined.

Where you have import {Button} from 'react-bootstrap' you need to import every component that you plan on using in your file ( that is part of that framework ).

The solution would be adding Navbar, like so:

import { Button, Navbar } from 'react-bootstrap'

Also have you included Bootstrap styles in your project? https://react-bootstrap.github.io/getting-started/introduction

Upvotes: 7

Related Questions