Develop Reference

React.js setState bad call Warning. { NavLink }

I called a function inside the style attribute.
I want to change a state value based on which NavLink is active,
So I made the callback function inside the style attribute because the style callback function has a default parameter that checks if the NavLink is active or not.
<NavLink
to="/"
style={({ isActive }) => {
if (isActive) {
setActive("Home");
}
}}
>
<span className={`icon `}>
{active === "Home" ? <HouseDoorFill /> : <HouseDoor />}
</span>
<span className="title">Home</span>
</NavLink>
That is the warning I get.
Warning
Location
I want to know if this warning is critical or not, and how can I solve this issue.

It's that fact that you are enqueueing a state update as an unintentional side-effect during the render cycle. The style prop should be returning a React.CSSProperties style object though when used. You don't need any state here though as you can use a children render function that receives the isActive prop.
Example:
<NavLink to="/">
{({ isActive }) => (
<>
<span className="icon">
{isActive ? <HouseDoorFill /> : <HouseDoor />}
</span>
<span className="title">Home</span>
</>
)}
</NavLink>
If you must keep the active state then use an onClick handler to issue the effect of updating the React state.
<NavLink
to="/"
onClick={() => setActive("Home")}
>
<span className="icon">
{active === "Home" ? <HouseDoorFill /> : <HouseDoor />}
</span>
<span className="title">Home</span>
</NavLink>
See the NavLink documentation for more detail.

NavLink Active property does not work with nested pages

I am using Reactjs in my project. NavLink active property does not work with nested pages inside the same tab?? It works just in the main tab anything inside the main tab does not work with. I want the white border appear in the main tab while open any pages inside it.
import { NavLink } from "react-router-dom";
function Navbar() {
let activeStyle = {
border: "solid 3px #FFF",
};
return (
<>
<nav className="navbar">
<ul className="nav-items">
{navItems.map((item) => {
if (item.id === "3") {
return (
<li
key={item.id}
className={item.cName}
onMouseClick={() => setDropdown(true)}
onMouseEnter={() => setDropdown(true)}
onMouseLeave={() => setDropdown(false)}
>
<NavLink to={item.title}
style={({ isActive }) =>
isActive ? activeStyle: undefined
}
>{item.title}</NavLink>
{dropdown && <Dropdown />}
</li>
);
}
return (
<li key={item.id}
className={item.cName}>
<NavLink to={item.path}
style={({ isActive }) =>
isActive ? activeStyle: undefined
}>{item.title}</NavLink>
</li>
);
})}
</ul>
</nav>
</>
);
}
export default Navbar;

Why does the Root Navlink always gets the active class on React-Router v6? [duplicate]

<Route path='/dashboard' element={<Navbar />}>
<Route index element={<Home />} />
<Route path='profile' element={<Profile />} />
<Route path='wallets' element={<Wallet />} />
<Route path='users' element={<Users />} />
</Route>
Here's my code and what basically happens is in my Navbar I got the active page link marked blue
So when I'm on /dashboard it shows Home in blue
But when I'm on /dashboard/profile it shows both home and profile in blue
<li>
<NavLink to=''>
{({ isActive }) =>
isActive ? (
<text style={{color: blue}}>Home</text>
) : (
<text>Home</text>
)
}
</NavLink>
</li>
<li>
<NavLink to='profile'>
{({ isActive }) =>
isActive ? (
<text style={{color: blue}}>Profile</text>
) : (
<text>Profile</text>
)
}
</NavLink>
</li>

You can specify the end prop on the "root"-level link to the "/dashboard" path.
NavLink
If the end prop is used, it will ensure this component isn't matched
as "active" when its descendant paths are matched.
<NavLink to='' end>
{({ isActive }) =>
isActive ? (
<text style={{color: blue}}>Home</text>
) : (
<text>Home</text>
)
}
</NavLink>

<NavLink to="/">Home</NavLink>
<NavLink to="/profile">Profile</NavLink>
<NavLink to="/wallets">Wallet</NavLink>
Here React Router considers the /path the same as the /about. By including the end prop, the active class will be applied only when the URL matches its attributes.
NavLink to="/profile" style={({isActive}) => isActive ? {background: "hotpink"} : undefined} >Profile</NavLink>

React active navlink not working - home link always in active state

I am trying to add an active class to the nav link of the page you are on, however, no matter which page you are on, the homepage always has the active class. As you can see here, both home and about are green when on the about page - https://gyazo.com/8ad3f7c455075bad53344372d56b9b4a
My code is below. When I checked this in the console with logs, it seems the home navlink is always in an active state, why is this? https://gyazo.com/40faf1ee4a076d78edff7596daa44845
In past react apps, I just used the activeClassName and it worked fine
import React from "react";
import { NavLink } from "react-router-dom";
import "./../App.css";
function Navbar() {
return (
<nav>
<NavLink
to="/"
className={({ isActive }) => "nav-link" + (isActive ? " active" : "")}
>
<span className="nav-text">Home</span>
</NavLink>
<NavLink
to="/about"
className={({ isActive }) => "nav-link" + (isActive ? " active" : "")}
>
<span className="nav-text">About</span>
</NavLink>
<NavLink
to="/services"
className={({ isActive }) => "nav-link" + (isActive ? " active" : "")}
>
<span className="nav-text">Services</span>
</NavLink>
<NavLink
to="/contact"
className={({ isActive }) => "nav-link" + (isActive ? " active" : "")}
>
<span className="nav-text">Contact</span>
</NavLink>
</nav>
);
}
export default Navbar;

How to rerender unrelated components when a dropdown changes its selected value in react.js

I have a dropdown list that contains account names and accounts Ids. The dropdown is a child that lives in my NavMenu.js titled AccountsDropdown
render () {
return (
<header>
<Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
<Container>
<div><NavbarBrand className="brand-name" tag={Link} to="/">PABST</NavbarBrand><br />
<NavbarText className="sub-headline" to="/">Budget Allocation & Forecasting</NavbarText></div>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<AccountsDropdown></AccountsDropdown>
<Collapse className="d-sm-inline-flex flex-sm-row-reverse center-align-flex margin-right" isOpen={!this.state.collapsed} navbar>
<ul className="navbar-nav flex-grow">
<NavItem>
<NavLink tag={Link} id={"budgetplanner"} onClick={() => this.handleChange("budgetplanner")} className={"budgetplanner" === this.state.selectedNavItem ? "active" : "inactive"} to="/"><EventNoteIcon ></EventNoteIcon>Budget Planner</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} id={"budgetresults"} onClick={() => this.handleChange("budgetresults")} className={"budgetresults" === this.state.selectedNavItem ? "active" : "inactive"} to="/budget-results"><PieChartRoundedIcon></PieChartRoundedIcon>Budget Results</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} id={"docs"} onClick={() => this.handleChange("docs")} className={"docs" === this.state.selectedNavItem ? "active" : "inactive"} to="/fetch-data"><FolderRoundedIcon></FolderRoundedIcon>Docs</NavLink>
</NavItem>
</ul>
</Collapse>
This menu as you can see also has redirects to my other JSX pages. So for example, when a user clicks on Budget Results, they get redirected to the Budget Results page. This Budget Results page is a top level parent. It is not a child of any other component. Here is the code:
import React, { Component } from 'react';
import MainGridComponent from './MainGridComponent';
import '../css/main.css';
export class BudgetResults extends Component {
static displayName = BudgetResults.name;
constructor(props) {
super(props);
this.state = {
accountid: "1"
};
}
render() {
return(
<div className="row">
<div className="col-md-8 budget-results">
<span className="grid-header">Recent Budget Output</span>
<MainGridComponent accountid={this.state.accountid} pagetype="BudgetResults"></MainGridComponent>
</div>
</div>
);
}
}
export default BudgetResults
As you can see, AccountsDropdown and BudgetResults are entirely unrelated. My question is, is it possible to cause a rerender on BudgetResults when AccountsDropdown changes its state? Is this something that's only possible with Redux?

Redux is not compulsory to achieve this.
Add a common ancestor to BudgetResults & AccountsDropdown.
Move the state up to this ancestor.
Then you can use either prop callbacks or the Context API to achieve it.