Gatsby
Up and Running with Gatsby: Layouts

Passing Props into the Layout Component

PRO

What if we need to control which parts of the layout show on different pages?

In this video, we learn how to use props to toggle parts of the layout on and off depending on which pages needs what.

In Layout.js, we can add a boolean check for whether we have a noHeader prop. If we don't, we'll display the Header. The code looks like this:

<div>
  {!noHeader && <Header />} 
  {children}
</div>

Then, in about.js, we can add a noHeader prop to the Layout component to turn hide that h1 tag.

Let's do an assignment to help you remember how to nest layout components.