I am trying to implement a Navbar in React but when I run it, all elements are shown one under another one, and not in one line. I imported react-bootstrap but it looks like it does not look how it should. I am new to React, maybe I miss something.
Here is the code:
import React, { useState, useEffect } from 'react'
import UserService from '../services/UserService';
import { useLocation, useSearchParams } from 'react-router-dom';
import { Navbar, Nav, NavDropdown, Button } from 'react-bootstrap'
function EmployeeComponent() {
const [users, setUsers] = useState([])
useEffect(() => {
getEmployees()
}, [])
const getEmployees = () => {
console.log("getEmployee");
UserService.getUsers().then((response) => {
setUsers(response.data)
console.log(response.data);
});
};
const location = useLocation();
const [searchParam] = useSearchParams();
return (
<div className="container">
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>