Is there any way to pass parameters to a persistent layout?

[maxonfjvipon]

Hello there.
I recently started work with Inertia and I like it, but there's a problem, that makes me invent the wheel...
It's about React. Here's persistent layout, that I use:

export const Authenticated = ({title, children}) => {
    // some code
    return (
        <Layout>
            <PageHeader
                title={title}
            />
            <Content>
                {children}
            </Content>
        </Layout>
    )
}

And here's Projects/Show page:

const Show = () => {
    const {project} = usePage().props
    // some code
    return (
        // ... 
    )
}

Show.layout = page => <Authenticated children={page} title={"Project"}/>

export default Show

I want title of Authenticated layout component to be project.name that I got from usePage hook
Is there any way to take some props from component and pass them to layout without crutches?

[hatimsue]

I have used this approach to pass props from children to layout

/* eslint-disable no-unused-vars */
function Users({ auth }) {
    return (
        <>
            <Content>
                Users view
            </Content>
        </>
    )
}

Users.layout = page => {
    return (
        <DashboardLayout auth={page.props.auth}>
            {page}
        </DashboardLayout>
    )
}
export default Users

It is not the same you need but I think that with this approach you can figure out how to do what you need.

[fnagel]

@hatimsue What type is page in this case?

[hatimsue]

@fnagel page is a child, so if you are using the 'prop-types' module, then I guess you can choose between :

PropTypes.node
PropTypes.element
PropTypes.elementType

look at this

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
// see https://reactjs.org/docs/rendering-elements.html for more info
optionalNode: PropTypes.node,

// A React element (ie. ).
optionalElement: PropTypes.element,

// A React element type (eg. MyComponent).
// a function, string, or "element-like" object (eg. React.Fragment, Suspense, etc.)
// see https://github.com/facebook/react/blob/HEAD/packages/shared/isValidElementType.js
optionalElementType: PropTypes.elementType,

[fnagel]

Thanks for the answer! Seems my IDE (PhpStorm) does not like that at all, but just using ReactElement as type seems to work.

Looks like this now:

Edit.layout = (page: ReactElement) => {
    return (
        <AuthenticatedLayout
            header={(page.props.project.id ? page.props.project.name : "New project")}
            backRoute={route('project.index')}
            children={page}
        />
    );
}