Uncaught ReferenceError: Navbar is not defined - reactjs

Question

I develop react + meteor app, then I got error like this,
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>
React-Bootstrap
</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
I want to correct way to Navbar add

Answer 1

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

Answer 2

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"
/>