We Keep Coding

Cannot get navbar to function on collapse using react-bootstrap

I'm using react-bootstrap to create a responsive navbar and for some reason it will not work. I've tried using react-router-dom to handle page change and creating a function withing the navbar to handle page change to see if that was the issue. The hamburger icon is not even rendering just a gray blank square.
This is my current code
And here is what it renders
What else can I try?
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar'
import '../css/Navbar.css'
export default function NavbarRender({ currentPage, handlePageChange }){
return(
<Navbar collapseOnSelect expand='sm' id='total-nav'>
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#about" onClick={() => handlePageChange('About')}
className={currentPage === 'About' ? 'nav-link active' : 'nav-link'} id="navbar">
About
</Nav.Link>
<Nav.Link href="#portfolio" onClick={() => handlePageChange('Portfolio')}
className={currentPage === 'Portfolio' ? 'nav-link active' : 'nav-link'} id="navbar">
Portfolio
</Nav.Link>
<Nav.Link href="#resume" onClick={() => handlePageChange('Resume')}
className={currentPage === 'Resume' ? 'nav-link active' : 'nav-link'} id="navbar">
Resume
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

I have that problem when forget to import react-boostrap CSS
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';

MUI Drawer opening but not closing in React web app

I have a Navbar component in my React app which shows a Sidebar component when screen is small. I used Material UI for the Drawer for displaying the sidebar.
My issue is, on clicking the hamburger icon, drawer opens fine. But it doesn't close when clicking the links or even outside the Sidebar.
How to solve this? What am I doing wrong? Here is my code.
Navbar.js
import React, { useContext, useEffect, useState } from "react";
import "./navbar.css";
import Sidebar from "./Sidebar";
import { NavLink } from "react-router-dom";
import { Drawer } from "#mui/material";
import IconButton from "#mui/material/IconButton";
import MenuIcon from "#mui/icons-material/Menu";
const Navbar = () => {
const [drwOpen, setDrwOpen] = useState(false);
const handleOpen = () => {
setDrwOpen(true);
};
const handleClose = () => {
setDrwOpen(false);
};
return (
<header>
<nav>
<div className="left">
<div className="hamburger" onClick={handleOpen}>
<IconButton>
<MenuIcon style={{ color: "#fff" }} fontSize="large" />
</IconButton>
<Drawer open={drwOpen} onClose={handleClose}>
<Sidebar logClose={handleClose}/>
</Drawer>
</div>
<NavLink to="/">
<img
className="navlogo"
src={process.env.PUBLIC_URL + "/math.png"}
alt="logo"
/>
</NavLink>
</div>
</nav>
</div>
</header>
);
};
export default Navbar;
Sidebar.js
import React from "react";
import { NavLink } from "react-router-dom";
import { useContext, useState } from "react";
import ChevronRightIcon from "#mui/icons-material/ChevronRight";
import "./sidebar.css";
const Sidebar = ({logClose}) => {
return (
<>
<div className="sidebar">
<p>random text</p>
<div className="menu" onClick={()=>logClose()}>
<NavLink to="/" style={{ textDecoration: "none" }} className="lis" >
<p>ABC</p>
<ChevronRightIcon style={{ fill: "#949494" }}/>
</NavLink>
<NavLink to="/" style={{ textDecoration: "none" }} className="lis">
<pXYZ</p>
<ChevronRightIcon style={{ fill: "#949494" }}/>
</NavLink>
<NavLink to="/" style={{ textDecoration: "none" }} className="lis">
<p>123</p>
<ChevronRightIcon style={{ fill: "#949494" }}/>
</NavLink>
</div>
</div>
</>
);
};
export default Sidebar;

The onClick event in <div className="hamburger"> is probably interfering with the open state of your drawer.
Since the drawer is a child of that div, every click on the drawer will propagate and call the onClick event of its parent element as well.
Try putting <Drawer> outside of <div className="hamburger">
Or use event.stopPropagation() in an onClick in the drawer component to stop that behaviour like so:
<Drawer onClick={(event) => {event.stopPropagation()}}>
Hope this could help!

When I add <Link></Link> component Layout's SelectedKeys is not working

Here is my *Navbar
import React, { useState } from "react";
import { Layout, Menu } from "antd";
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
} from "#ant-design/icons";
import { Link } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const Navbar = (props) => {
const [collapsed, setCllapsed] = useState(false);
const toggle = () => {
setCllapsed(!collapsed);
};
return (
<div>
<Layout id="components-layout-demo-custom-trigger">
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
<Menu.Item key="1" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/">
Dashboard
</Link>
</Menu.Item>
<Menu.Item key="2" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/groups">
Groups
</Link>
</Menu.Item>
<Menu.Item key="3" icon={<VideoCameraOutlined />}>
<Link style={{ textDecoration: "none" }} to="/tutors">
Tutors
</Link>
</Menu.Item>
<Menu.Item key="4" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/students">
Students
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(
collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
{
className: "trigger",
onClick: toggle,
}
)}
</Header>
<Content
className="site-layout-background"
style={{
margin: "24px 16px",
padding: 24,
minHeight: 280,
}}
>
{props.children}
</Content>
</Layout>
</Layout>
</div>
);
};
export default Navbar;
In this example I was using <Menu.Item></Menu.Item> component from antd . But it stopped working when clicked once. It changed onclick function. After adding from react-router-dom, I am having trouble with SelectedKeys of Antdesign's Layout. Before Link component of react-router-dom selectedKeys was working when you click one time, but after adding Link component, SelectedKeys is working when double clicked. How can I solve it? I need this should work once. Anyone can help me?

how do i do a href in react-bootstrap from the component header to another component in the component App?

What im trying to do is a link between different components in my page, i have a component header with a bunch of links and i want to make reference to anotother component on the same page, in other words im trying to do the following thing but with react:
Hi!
<div id="#move">You have been moved</div>
This is what i have in the header component im using react-bootstrap, i've found some ways to do it without it but i need to do it with it
export default function Header() {
return (
<>
<Navbar variant="dark" expand="lg" style={{ "background-color": "#1A2A4E" }} sticky="top" >
<Navbar.Brand href="#home">Logo</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" />
<Nav>
<LinkContainer to={{
hash:"Footer"
}}>
<Nav.Link href="#">Actividades</Nav.Link>
</LinkContainer>
<Nav.Link href="#">Fechas</Nav.Link>
<Nav.Link href="#">Cursos</Nav.Link>
<Nav.Link href="#">Instalaciones</Nav.Link>
<Nav.Link href="#">Contacto</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</>
)
}
and then in the App the first link gets the Actividades but the href doesnt work the App component is:
function App() {
return (
<div className="App">
<div className="imagen-fondo" />
<div className="fondo-blaquesino" />
<div className="">
<Header Footer={<Footer/>} />
<Infoinicio />
</div>
<div className="">
<Actividades />
<Cursos />
<InscrCalendario />
<Instalaciones />
<Contacto />
<div id="#Footer" />
<Footer />
</div>
</div>
);
}

So, you want to auto scroll to the selected id, rite? I achieve it using <NavLink /> from reactstrap. Here is how it works
NavigationBar.tsx
import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import {
Navbar, NavbarToggler, Collapse,
Nav, NavItem, NavLink,
} from 'reactstrap';
import { HistoryProps } from '../../interfaces';
import './TopBar.scss';
function NavigationBar(props: HistoryProps) {
const [isOpen, setIsOpen] = useState(false);
const toggleNav = () => setIsOpen(!isOpen);
const path = props.history.location.hash;
return (
<Navbar expand="md" className="navbar-wrapper">
<NavbarToggler
onClick={toggleNav}
data-testid="navbar-toggler"
className="navbar navbar-light outline-none"
/>
<Collapse isOpen={isOpen} navbar data-testid="navbar-collapse" className="h-100">
<Nav className="ml-auto h-100" navbar>
<NavItem className="navbar-navitem pl-2 pr-2" active={!path || path.includes('#about-me')}>
<NavLink className="font-size-12" href="#about-me">
About Me
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
);
}
export default withRouter(NavigationBar);
And defined the target component/element, in my case, in another component.
LandingPage.tsx
import React from 'react';
import { Row } from 'reactstrap';
import './LandingPage.scss';
export default function LandingPage() {
return (
<div className="container-fluid">
<Row className="about-me-wrapper id-wrapper" id="about-me">
{/* Element here */}
</Row>
</div>
);
}

Using react-scroll (Link) while using react-boostrap Nav.Link?

I was able to set up responsive navbar using react-bootstrap, but when I tried using Link from react-scroll withing Nav.Link
<Nav.Link href='projects'>
<Link
activeClass='active'
to='homepage'
spy={true}
smooth={true}
offset={-70}
duration= {500}
>
Projects
</Link>
</Nav.Link>
I would get an error on the browser stating <a> cannot appear as a descendant of a <a>. I tried to change Nav.Link to Nav.Item and change styles of link accordingly, but once I remover Nav.Link the collapseOnSelect feature stops working in my Navbar for mobile.
import React from 'react';
import Scroll from 'react-scroll';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { ReactComponent as GithubIcon } from '../../assets/github.svg';
import { ReactComponent as TwitterIcon } from '../../assets/twitter.svg';
class Header extends React.Component {
render() {
return (
<div className='header' style={{ fontFamily: 'Fira Code, monospace' }}>
<Navbar className='shadow-lg' style={{ backgroundColor: '#2C3E50' }} collapseOnSelect expand="lg" fixed="top">
<Navbar.Brand onSelect={() => Scroll.scrollTo('Homepage', {
smooth: true,
offset: -70,
duration: 500
})}>
Name
</Navbar.Brand>
<Navbar.Toggle aria-controls='responsive-navbar-nav'/>
<Navbar.Collapse id='responsive-navbar-nav'>
<Nav className='mr-auto'>
<Nav.Link onSelect={() => Scroll.scrollTo('projects', {
smooth: true,
offset: -70,
duration: 500
})}>
Projects
</Nav.Link>
<Nav.Link onSelect={() => Scroll.scrollTo('contact', {
smooth: true,
offset: -70,
duration: 500
})}>
Contact
</Nav.Link>
</Nav>
<Nav className='ml-auto'>
<Nav.Link
href='https://github.com/jgil-r'
target='_blank'
rel='noopener noreferrer'
style={{
paddingLeft: '.5rem',
paddingRight: '.5rem'
}}
>
<GithubIcon />
</Nav.Link>
<Nav.Link
href='https://twitter.com/chuygil7273'
target='_blank'
rel='noopener noreferrer'
style={{
paddingLeft: '.5rem',
paddingRight: '.5rem'
}}
>
<TwitterIcon />
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
export default Header;
import React from 'react';
import './projects.styles.scss';
const Projects = () => (
<div className='projects-container' id='projects'>
<h1>Projects</h1>
</div>
);
export default Projects;

Since both Nav.Link and Link are components that render to <a> you can't include a Link inside of a Nav.Link.
You can use the onSelect property on the Nav.Link to add scrolling effects (and remove the Link from react-scroll) or set the Nav.Link as property to div.
import Scroll from 'react-scroll';
// ...
<Nav.Link
onSelect={() => Scroll.scrollTo('homepage', {
smooth: true,
offset: -70,
duration: 500,
})}
>
</Nav.Link>

Probably too late but hopefully someone else struggling on this can find this helpful
For me, Scroll.ScrollTo wasn't working
Instead, try importing scroller and use the scrollTo like this
import { scroller } from "react-scroll";
//...
<Nav.Link
onClick={() => scroller.scrollTo('homepage', {
smooth: true,
offset: -70,
duration: 500,
})}
>
</Nav.Link>
Note: I am also using onClick instead of onSelect

Solution:
import { Link } from "react-scroll";
//...
<Nav className="mr-auto">
<li className="nav-item">
<Link
href="#home"
to="home"
activeClass="active"
className="nav-link"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Home
</Link>
</li>
</Nav>