How do I set the `title` when using a layout?

[bookercodes]

Thanks so much for this lib, really enjoying it! Just experimenting with your layout example and I need to ask, how can I set this.props.title?

I tried setting defaultProps in Auth.tsx (just a component):

import * as React from 'react'

interface ILayoutProps {
  title: string
}

export default class extends React.Component<ILayoutProps, undefined> {
  public static defaultProps: ILayoutProps = {
    title: 'Authenticate'
  }

  public render () {
    return (
      <a href="/auth/google/callback">Login with Google</a>
    )
  }
}

But this.props.title is still undefined in Layout 😲

Any thoughts? Thanks!

[jedireza]

👋 Thanks for opening an issue. I just did a small refresh to the readme and examples.

There are two different ways you can do layouts. These are described in the readme.

https://github.com/jedireza/hapi-react-views#rendering-with-layouts

Wrapper style layouts

This example renders components as HTML adding the idea of using wrapper layouts. The wrapping is handled by this module, so it may feel like a bit of magic since there is no direct dependency to the layout in your component views.

Component style layouts

This example renders components as HTML but adds the idea of using component layouts. The component layout is a direct dependency of your view components with no magic handling by this module.

In your description above you linked to the layout component example. You can see in the view components that we set the title like this:

https://github.com/jedireza/hapi-react-views/blob/2a44c4181b81870ea2bb58d76a18469c41d1cf55/examples/layout-component/views/home.jsx#L9

And you'll notice that in the wrapper layout example we set it by passing props on to the view in the hapi route handler:

https://github.com/jedireza/hapi-react-views/blob/2a44c4181b81870ea2bb58d76a18469c41d1cf55/examples/layout/server.js#L38

I hope that helps.

[bookercodes]

Oh, I see! That makes perfect sense thanks!