Gatsby
Up and Running with Gatsby: Layouts

Passing Props into the Layout Component

PRO
Outline

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.

 

I finished! On to the next chapter