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

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?

CodePudding user response：

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.