replacing and reloading components side menu

Question

I have created workplace 10 components and trying to get data from the workplace1 component using the side menu component.

In the side menu, I have created workplace 10 components if click workplace10th li component loading workplace component 10 but I cannot see which component had selected in the side menu

...please refer my code in this link https://codesandbox.io/s/fervent-http-ijbiz

this is workplaces component

class WorkPlace1 extends Component {
  render() {
    return (
      <div>
        <div>
          <Row>
            <Col sm={4}>
              <Worksplaces />
            </Col>
            <Col sm={5}>
              <div>Work Place 1</div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

this is workplace2 component

class WorkPlace2 extends Component {
  render() {
    return (
      <div>
        <div>
          <Row>
            <Col sm={4}>
              <Worksplaces />
            </Col>
            <Col sm={5}>
              <div>Work Place 2</div>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

this is side menu component

class Home extends Component {
  render() {
    return (
      <div>
        <ul className="side-menu-ul-data">
          <NavLink exact to="/workplaces/workplace1">
            <li>Work Place 1</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace2">
            <li>Work Place 2</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace3">
            <li>Work Place 3</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace4">
            <li>Work Place 4</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace5">
            <li>Work Place 5</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace6">
            <li>Work Place 6</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace7">
            <li>Work Place 7</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace8">
            <li>Work Place 8</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace9">
            <li>Work Place 9</li>
          </NavLink>
          <NavLink exact to="/workplaces/workplace10">
            <li>Work Place 10</li>
          </NavLink>
        </ul>
      </div>
    );
  }
}

score 1 · Accepted Answer · answered Mar 04 '20 at 06:22

You render a separate instance of the side menu within every workplace page, thus each instance is unmounted upon navigation to new route and new instance is mounted. This isn't very DRY. A suggestion would be to configure your code to only ever mount/render ONE single side menu within your router, this way you avoid the unmount/mount cycle of identical components. Notice also the removal of the Switch as that doesn't allow for multiple matches (only first match as opposed to any matches).

App.jss

<Router>
  <Header />

  // top level routes
  <Route exact path="/" component={Home} />
  <Route exact path="/workplaces" component={WorkPlace1} />
  <Route exact path="/services" component={Services} />
  <Route exact path="/experiments" component={Experiments} />
  <Route exact path="/contacts" component={Contact} />

  // "nested" sub-routes
  <Row>
    <Col sm={4}>
      // always render side menu on "workplaces" sub-routes (no exact prop)
      <Route path="/workplaces">
        <SideMenu />
      </Route>
    </Col>
    <Col sm={5}>
      <Route exact path="/workplaces/workplace1" component={WorkPlace1} />
      <Route exact path="/workplaces/workplace2" component={WorkPlace2} />
      <Route exact path="/workplaces/workplace3" component={WorkPlace3} />
      <Route exact path="/workplaces/workplace4" component={WorkPlace4} />
      <Route exact path="/workplaces/workplace5" component={WorkPlace5} />
      <Route exact path="/workplaces/workplace6" component={WorkPlace6} />
      <Route exact path="/workplaces/workplace7" component={WorkPlace7} />
      <Route exact path="/workplaces/workplace8" component={WorkPlace8} />
      <Route exact path="/workplaces/workplace9" component={WorkPlace9} />
      <Route
        exact
        path="/workplaces/workplace10"
        component={WorkPlace10}
      />
    </Col>
  </Row>
</Router>

In the workplace components the table row/col is removed since the router now defines the space.

WorkPlace.jsx

class WorkPlace1 extends Component {
  render() {
    return (
      <div>Work Place 1</div>
    );
  }
}

The following codesandbox demos the above, but I think a better solution involves using a display grid and assignable grid areas as tables (rows/cols) typically aren't as responsive (though a quick peek at react-grid-system implies it is a bit flexible). Being able to assign components to grid areas removes the necessity to have the Row & Col mixed in with the router logic.

hi Drew Reese...https://stackoverflow.com/questions/60597056/react-dialog-box-closed-issue....Please see this link and tell how to open dialog box in the current page. Please...Thanks — Manu Panduu, Mar 09 '20 at 11:53
Hello Drew Reese....please help on these question...i have posted question in the stack over flow........ — Manu Panduu, Mar 10 '20 at 07:11

score 0 · Answer 2 · answered Mar 03 '20 at 04:05

You have to save the state of current active workplace when user clicks on the link. And then using the state value you can add active class on each <li>element. Your side menu component should look like this:

class Home extends Component {
   state = {
      activeWorkPlace: 1,
   }

   setActiveWorkplace = (activeWorkPlace) => {this.setState({activeWorkPlace})};

  render() {
      return (
        <div>
           <ul className="side-menu-ul-data">
           <NavLink onClick={this.setActiveWorkplace.bind(this, 1)}  exact to="/workplaces/workplace1">
              <li className={this.state.activeWorkPlace === 1? 'active': ''}>Work Place 1</li>
           </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 2)} exact to="/workplaces/workplace2">
              <li className={this.state.activeWorkPlace === 2? 'active': ''}>Work Place 2</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 3)} exact to="/workplaces/workplace3">
              <li className={this.state.activeWorkPlace === 3? 'active': ''}>Work Place 3</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 4)} exact to="/workplaces/workplace4">
               <li className={this.state.activeWorkPlace === 4? 'active': ''}>Work Place 4</li>
      </NavLink>
            <NavLink onClick={this.setActiveWorkplace.bind(this, 5)} exact to="/workplaces/workplace5">
               <li className={this.state.activeWorkPlace === 5? 'active': ''}>Work Place 5</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 6)} exact to="/workplaces/workplace6">
               <li className={this.state.activeWorkPlace === 6? 'active': ''}>Work Place 6</li>
      </NavLink>
            <NavLink onClick={this.setActiveWorkplace.bind(this, 7)} exact to="/workplaces/workplace7">
               <li className={this.state.activeWorkPlace === 7? 'active': ''}>Work Place 7</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 8)} exact to="/workplaces/workplace8">
                <li className={this.state.activeWorkPlace === 8? 'active': ''}>Work Place 8</li>
      </NavLink>
          <NavLink onClick={this.setActiveWorkplace.bind(this, 9)} exact to="/workplaces/workplace9">
              <li className={this.state.activeWorkPlace === 9? 'active': ''}>Work Place 9</li>
      </NavLink>
           <NavLink onClick={this.setActiveWorkplace.bind(this, 10)} exact to="/workplaces/workplace10">
               <li  className={this.state.activeWorkPlace === 10? 'active': ''}>Work Place 10</li>
      </NavLink>
    </ul>
  </div>
);

} }

And add this style to your style.css file:

.active {
    color: red;
}

That should solve your problem.

Thanks for your answer...but my issue is.....please see the code sandbox link...its replacing components issue...when i want see data of workplace 10 li...the whole component has replacing...i cannot see selected of li element in the side menu...again i can see the workplace1 , workplace2..etc...after scrolling in side menu..then i can see workplace10 had selected — Manu Panduu, Mar 03 '20 at 04:13

replacing and reloading components side menu

2 Answers2

Linked