How to hide/show a component inside another component in ReactJS

Question

I have my application looking something like below..

import FirstComponent from "./components/firstComponent";
import NextComponent from "./components/nextComponent";
import MyProgressComponent from "./components/progressComponent";

class App extends React.Component {
render() {
  return (
    <Router>
        <div>
            <MyProgressComponent />
            <Route path="/" exact component={FirstComponent} />
            <Route path="/nextComponent" component={NextComponent} />   
        </div>
    </Router>
  );
}
}

As we can see 'MyProgressComponent' is visible when we navigate between 'http://localhost:3000/' and 'http://localhost:3000/nextComponent' because it is directly nested under Router component in App component. But I want 'MyProgressComponent' to be visible only in 'http://localhost:3000/nextComponent' and hidden in 'http://localhost:3000/'. Any suggestion ?

I can do this by importing 'MyProgressComponent' inside each component wherever required but I don't want to duplicate it in each component.

if you don't want to import it in every file, you just add a condition that makes MyProgressComponent not displaying when the path is / — Crocsx
– Crocsx, Commented Sep 11, 2019 at 6:32
and you can do one thing that you can import MyProgressComponent inside the NextComponent — Prabhat Kumar
– Prabhat Kumar, Commented Sep 11, 2019 at 6:39

Jaya Krishna · Accepted Answer · 2019-09-11 06:48:03Z

1

You can render multiple components using the below syntax

<Route path="/nextComponent" render={() => 
 <>
  <MyProgressComponent />
  <NextComponent />
 </>
} 
/>

answered Sep 11, 2019 at 6:48

Jaya Krishna

3134 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prabhat Kumar Over a year ago

Nice I like this solution too

Prabhat Kumar · Accepted Answer · 2019-09-11 06:45:41Z

0

Based on @Crocsx comment you can apply following check on your code.

<Router>
  <div>
    {this.props.location.pathname === "/nextComponent" ?  <MyProgressComponent />: null}
    <Route path="/" exact component={FirstComponent} />
    <Route path="/nextComponent" component={NextComponent} />
  </div>
</Router>

answered Sep 11, 2019 at 6:45

Prabhat Kumar

5305 silver badges13 bronze badges

Comments

indolentdeveloper · Accepted Answer · 2019-09-11 06:46:48Z

0

you can use switch provided by router to achieve this.

Something like below should work for you.

<Switch>
  <Route exact path="/nextComponent" component={MyProgressComponent} />
</Switch>
<Switch>
  <Route path="/" exact component={FirstComponent} />
  <Route path="/nextComponent" component={NextComponent} /> 
</Switch>

more documentation is available here https://reacttraining.com/react-router/web/guides/basic-components

answered Sep 11, 2019 at 6:46

indolentdeveloper

1,3132 gold badges11 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to hide/show a component inside another component in ReactJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related