How to render only specific components in Reactjs

Question

Is there a way to render only some components in Reactjs

class UserproPage extends Component{

    render(){
        return(
        <>                 
             <Topbar/>
             <Navbar/>
             <div>
              <h1>Hello</h1>
             </div>
        </>
        )
    }

The <Navbar/> has menu button that are common to all the pages hence I do not want it to render them every time I click on links on the menu.

reactjs.org/docs/conditional-rendering.html

Andrew Li
– Andrew Li

2019-06-24 14:14:20 +00:00
Commented Jun 24, 2019 at 14:14 — Andrew Li
– Andrew Li, Commented Jun 24, 2019 at 14:14
Possible duplicate of React Conditional Render and Navbar

Ajay Varghese
– Ajay Varghese

2019-06-24 14:19:58 +00:00
Commented Jun 24, 2019 at 14:19 — Ajay Varghese
– Ajay Varghese, Commented Jun 24, 2019 at 14:19
Possible duplicate of React conditional render pattern

Mosè Raguzzini
– Mosè Raguzzini

2019-06-24 14:25:21 +00:00
Commented Jun 24, 2019 at 14:25 — Mosè Raguzzini
– Mosè Raguzzini, Commented Jun 24, 2019 at 14:25

Ghazouan Badr · Accepted Answer · 2019-06-24 14:20:16Z

0

you can make a condition in your <Navbar/> component whether you display or not the menu button example :

class Navbar extends Component {

let display = true;

  render() {
    return (
      <div>This is my component.</div>
      {display && <button>menu</button>}
    );
  }
}

the menu button is displayed only when display variable is true

answered Jun 24, 2019 at 14:20

Ghazouan Badr

4865 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to render only specific components in Reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related