react Bug: Hoisted <title> containing more than 1 JSX child will contain nothing

React version: 19.1.0

Steps To Reproduce

Add a <title> attribute with more than than 1 JSX child e.g.

<title>{projectName} | Projects</title>

or

<title>{projectName}{section}</title>

Link to code example: https://stackblitz.com/edit/vitejs-vite-nch86hgd?file=src%2FApp.tsx

The current behavior

The title that gets hoisted to <head> is empty (i.e. <title></title>), with no console errors

The expected behavior

The children are concatenated, e.g. <title>My Project | Projects</title>

You can of course work around the issue by ensuring there is only one child

<title>{projectName + " | Projects"}</title>

May 22 '25 15:05 michaelboyles

This is documented behavior: https://react.dev/reference/react-dom/components/title

We should have a warning though.

May 23 '25 08:05 eps1lon

This behavior makes sense from a spec-compliance and design consistency perspective.

That said, I also agree that a warning would be helpful — this is easy to overlook, and the browser silently ignores the title when multiple children are passed.

May 23 '25 11:05 yeomgahui

You’re right — when you write:

{projectName}{section}

It ends up rendering multiple children inside

, which doesn’t work well with how React (and many head managers) handle the <title> element — it expects a single string, not multiple JSX nodes. <p>✅ The workaround you mentioned is the best practice:</p> <title>{projectName + " | Projects"}

or using a template literal:

{`${projectName} | ${section}`}

This ensures only one string child is passed, and works as expected.

May 23 '25 14:05 moaminrajabi

I found that there was an existing warning for this, but only for SSR. I've applied the same warning to the client: #33349

May 23 '25 16:05 michaelboyles

🐛 Bug:

with multiple JSX children renders empty <p>Summary: When using multiple JSX children inside a </p><title> tag in React, the rendered title in the browser becomes empty (<title>) with no errors in the console.

⸻

Example Code:

{projectName} | Projects or {projectName}{section} 👉 Results in: But this version does work: {projectName + " | Projects"}

Expected Behavior: React (or the underlying tooling) should concatenate the children into a string and render:

My Project | Projects

May 26 '25 16:05 moaminrajabi

❤️

Jun 03 '25 07:06 Gurupatil0003

@eps1lon is this still open?

Oct 24 '25 06:10 saif-malik-01