We Keep Coding

Nav Link not rerendering page when clicked. Force update freezes page

I have a nav bar for a website I'm building. The links in the nav bar to a section (#id) in the page but do not go to the section and only update the url. If I type in the url in the address bar, it works correctly but when using the link nothing happens.
It only works if I force the page to rerender, but after rerendering the page freezes and I get an error in the console: Uncaught TypeError: Cannot read properties of undefined (reading 'forceUpdate'). I added an onClick and also tried using setState to force re-render.
Index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
App.js
function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/home" element={<Home />} />
</Routes>
</div>
);
}
export default App;
Home.jsx
function Home() {
return (
<div>
<Container fluid>
<NavBar />
<HomeContent />
</Container>
<Pricing />
<Footer />
</div>
);
}
export default Home;
NavBar.jsx
function handleClick() {
this.setState({ state: this.state });
// this.forceUpdate();
}
function NavBar() {
return (
<>
<Navbar variant="dark" expand="lg">
<Container>
<Navbar.Brand onClick={handleClick} as={Link} to="/home">
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link onClick={handleClick} as={Link} to="/home">
Home
</Nav.Link>
<Nav.Link onClick={handleClick} as={Link} to="/home#pricing">
Pricing
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
export default NavBar;
Pricing.jsx
function Pricing() {
return (
<section id="pricing">
<h2 className="section-heading">This is the pricing section</h2>
</section>
);
}
export default Pricing;
I also tried using withRouter on the NavBar component
I read that if I have to resort to forcing the page to render then I may be doing something wrong but I'm new to React and I've been searching for the past couple of days on better ways to do this but still couldn't find a better way to do it.

this.setState and this.forceUpdate are older React class-based-only component methods. They won't work in React function components.
react-router-dom alone doesn't deal/handle with hash links, i.e. navigating to a specific route path and then scrolling to a specific hash anchor. Currently the react-router-hash-link still works with react-router-dom#6. Import the HashLink from react-router-hash-link and use instead of the Link component from RRD.
Example:
import React from "react";
import { Nav, Navbar } from "react-bootstrap";
import { Link } from "react-router-dom";
import { HashLink } from "react-router-hash-link"; // <-- import hash link
function NavBar() {
return (
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand as={Link} to="/home"></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link as={Link} to="/home">
Home
</Nav.Link>
<Nav.Link as={HashLink} to="/home#pricing"> // <-- hash link
Pricing
</Nav.Link>
<Nav.Link as={HashLink} to="/home#about"> // <-- hash link
About
</Nav.Link>
<Nav.Link as={HashLink} to="/home#contact"> // <-- hash link
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default NavBar;

The best way to solve your problem to create React router structure in your web app. I suggest you to go through React router beginners page.
Also, in your case I suggest to create React router structure such as this structure:
You will have the main index.js file:
const router = createBrowserRouter([
{
path: "/",
element: <Layout />,
children: [
{
path: "mainpage/",
element: <MainPage />,
},
],
},
]);
You will not have app.js file. You will just have a layout.jsx file:
import { Outlet } from 'react-router-dom';
import Nav from "./components/Nav";
const Layout = () => {
return (<>
<Nav />
<Outlet />
</>)
}
And you should just add paths and more children to index js. Just create some components and add them to children array as a main page one.
And in your nav component you must have links to your pages like in the following nav component example:
import React from 'react';
import { Link } from "react-router-dom";
function Nav(props) {
return (
<header className="header">
<div className="header-container">
<nav className="header-nav">
<ul className="nav-list">
<li>
<Link to={`mainpage/`}>Home</Link>
</li>
<li>
<Link to={`News/`}>News</Link>
</li>
<li>
<Link to={`About/`}>About</Link>
</li>
<li>
<Link to={`Contacts`}>Contacts</Link>
</li>
</ul>
</nav>
</div>
</header>
);
}
export default Nav;
I hope you will solve your issue.

How to add circular profile picture to react bootstrap nav bar

I'm trying to add a circular profile picture to my react-bootstrap nav bar.
Similar to this:
But I'm not sure where to add the div for the circular image.
Here is my navbar code:
import { Link } from "react-router-dom";
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Navbar, Nav, Container } from 'react-bootstrap';
const NavBar = (props) => {
const user = 'Petrina.C'
return (
<>
<Navbar expand="lg">
<Container style={{maxWidth:'100%'}}>
<Navbar.Brand href="#home">Voter Outreach</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto" id="navLinks">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/voters">Voters</Nav.Link>
<NavDropdown title={`${user}`} 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>
</Container>
</Navbar>
{props.children}
</>
);
}
export default NavBar;
Any help is appreciated!

You can put image and use class rounded-circle to make it like this:
<img src="..." class="rounded-circle" alt="...">

There are several properties available in React-Bootstrap docs.
You can simply pass the props as true if you want a property to be applied.
Example:
import Image from 'react-bootstrap/Image'
<Image src="..." roundedCircle={true}>
Or you can always use the CSS properties
import Image from 'react-bootstrap/Image'
<Image src="..." style={{ borderRadius: "50%", height: "100px", width: "100px" }} />

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>
);
}

How to check if React Bootstrap Navbar has collapsed?

I want to change the content of the collapsed Navbar but can't find any props or events for it.
Here is my Navbar with Dropdown in non collapsed state.
And collapsed Navbar. Need to change Dropdown for something else.
Sample code
<Navbar expand="sm" bg="primary" variant="dark" fixed="top">
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
<NavDropdown>
<NavDropdown.Item>Profile</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>Log out</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
How to do it in a proper way?
Thanks in advance!

I was able to do this by binding to the onToggle function of the Navbar and using it to set a boolean.
const Header = () => {
const [expanded, setExpanded] = useState(false)
const setToggle = () => {
console.log('toggle');
setExpanded(true)
}
return (
<Navbar expand="sm" onToggle={setToggle}>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
{expanded && <NavDropdown>
<NavDropdown.Item>Profile</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>Log out</NavDropdown.Item>
</NavDropdown>}
</Nav>
</Navbar.Collapse>
</Navbar>
)
}

onBlur event not allowing link clicks to register

I have a Navigation Bar with a React-InstantSearch: <SearchBox /> in that provides me with Autocomplete, there is an onChange event that fires that shows the suggestions box. There is also an onBlur event that fires when you leave the search box and hides the box. This onBlur event is preventing a link click from firing. (Verified by removing it). Does anyone have a suggestion on how I can correct this? Code below:
Relevant Portion of App.js
render() {
if (this.state.redirect) {
return (
<div className="App-container">
<InstantSearch
appId="{MY APP ID}"
apiKey={process.env.REACT_APP_ALGOLIA_API_KEY}
indexName="blog_posts"
>
<NavigationBar
loggedIn={this.state.loggedIn}
handleLogout={this.handleLogout}
username={this.state.username}
/>
<Redirect to="/" />;
</InstantSearch>
</div>
);
}
return (
<div className="App-container">
<InstantSearch
appId="{MY APP ID}"
apiKey={process.env.REACT_APP_ALGOLIA_API_KEY}
indexName="blog_posts"
>
<NavigationBar
loggedIn={this.state.loggedIn}
handleLogout={this.handleLogout}
username={this.state.username}
/>
<Switch>
<Route exact path="/" />
<Route path="/posts" component={PostListView} />
<Route
path="/post/:postID"
render={props => (
<PostDetailView
{...props}
loggedIn={this.state.loggedIn}
username={this.state.username}
deleteComment={this.deleteComment}
/>
)}
/>
<Route
path="/login"
render={props => (
<LoginForm {...props} handleLogin={this.handleLogin} />
)}
/>
</Switch>
</InstantSearch>
</div>
);
}
}
export default App;
NavigationBar.js
import React, { Component } from "react";
import { Navbar, Nav, NavItem } from "react-bootstrap";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { Hits, SearchBox, Highlight } from "react-instantsearch-dom";
import CompanyHeader from "../config/settings.js";
/**
* Navigation Bar for App
* Utilizes react-bootstrap
* #extends Component
*/
class NavigationBar extends Component {
constructor(props) {
super(props);
this.state = {
hitResultsShown: false
};
this.onChange = this.onChange.bind(this);
this.onBlur = this.onBlur.bind(this);
}
onChange() {
this.setState({
hitResultsShown: true
});
}
onBlur(e) {
this.setState({
hitResultsShown: false
});
e.target.value = "";
}
render() {
const logged_in_nav = (
<React.Fragment>
<NavItem eventKey={2} href="#">
{`Hello, ${this.props.username}`}
</NavItem>
<NavItem eventKey={3} onClick={this.props.handleLogout}>
Logout
</NavItem>
</React.Fragment>
);
const logged_out_nav = (
<React.Fragment>
<NavItem eventKey={2} href="/login">
Log In
</NavItem>
<NavItem eventKey={3} href="/signup">
SignUp
</NavItem>
</React.Fragment>
);
return (
// Instantiate a Navbar with:
// Dark Theme
// Full-width
// sticks to top of viewport
<Navbar inverse fluid fixedTop>
<Navbar.Header>
<Navbar.Brand>
{CompanyHeader}
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="/random">
Random Post
</NavItem>
{this.props.loggedIn ? logged_in_nav : logged_out_nav}
</Nav>
<Navbar.Form pullRight>
<SearchBox onChange={this.onChange} onBlur={this.onBlur} />
{this.state.hitResultsShown ? <Hits hitComponent={PostHits} /> : ""}
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
);
}
}
class PostHits extends Component {
constructor(props) {
super(props);
}
render() {
const hit = this.props.hit;
return (
<div>
<span className="hit-name">
<Link to={`/post/${hit.id}`}>
<Highlight attribute="title" hit={hit} className="font--bold" />
</Link>
</span>
<p className="well">
{hit.content.length > 100 ? hit.content.slice(0, 100) : hit.content}
</p>
</div>
);
}
}

This is happening because your onBlur is only wrapping the Searchbox component.
When you click on the suggestions box link you are removing focus from the Searchbox and subsequently hiding the suggestions.
All you have to do is wrap both of the elements within the onBlur and your problem will be solved:
<div onFocus={this.onChange} onBlur={this.onBlur} >
<SearchBox />
{this.state.hitResultsShown && <Hits hitComponent={PostHits} />}
</div>
Note: Inline conditional rendering is better like that ^ and onFocus will call it once instead of repeatedly like onChange will.
In a situation like this your suggestions box would normally be part of the Search component as it is inherently linked, pushing the blur/change functionality down into that component and making it a lot more self-contained.

I had the same issue before. I solve with Hooks and a setTimeout for onBlur method with 200ms. That way, my child tab close right after i click on the link and my onChange worked fine too.
onBlur={()=>{setTimeout(() => {setSearch(false)}, "200")}}