Fix props is undefined in extended Inertia's Head #1433

tykatyk · 2023-02-05T15:15:11Z

According to the documentation you can extend Inertia's Head component.
Here is the example from the docs.

// AppHead.js
import { Head } from '@inertiajs/react'

const Site = ({ title, children }) => {
  return (
    <Head>
      <title>{title ? `${title} - My App` : 'My App'}</title>
      {children}
    </Head>
  )
}

export default Site

And then use that extended component like this:

import AppHead from './AppHead'

<AppHead title="About">

The problem
As you can see AppHead can receive children. But if you try to pass more than one child to that extended Head component, you will get an error in the console: TypeError: e.props is undefined

Here is the example of such usage that throws an error

import AppHead from "./AppHead";

export default function HomePage() {
    return (
        <>
            <AppHead title="Your page title">
                <meta name="description" content="Your page description" />
                <link rel="stylesheet" href="./styles.css" />
            </AppHead>
            <div>Some content here</div>
        </>
    );
}

This pull request fixes the problem of multiple children in extended Head component

jessarcher · 2023-02-14T00:14:25Z

Thank you! I've replicated the issue, confirmed this fixes it, and confirmed that it doesn't now break when there is only a single child 👍

Fix props is undefined in extended Inertia's Head

1c3d408

stephenglass mentioned this pull request Feb 8, 2023

Type error with children in Head component #1437

Closed

jessarcher merged commit d2ff503 into inertiajs:master Feb 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix props is undefined in extended Inertia's Head #1433

Fix props is undefined in extended Inertia's Head #1433

tykatyk commented Feb 5, 2023 •

edited

Loading

jessarcher commented Feb 14, 2023

Fix props is undefined in extended Inertia's Head #1433

Fix props is undefined in extended Inertia's Head #1433

Conversation

tykatyk commented Feb 5, 2023 • edited Loading

jessarcher commented Feb 14, 2023

tykatyk commented Feb 5, 2023 •

edited

Loading