toString children of title (#25838)

children of title can either behave like children or like an attribute. We're kind of treating it more like an attribute now so we should support toString/valueOf like we do on attributes.
facebook · Dec 7, 2022 · bfcbf33 · bfcbf33
1 parent d4bc16a
commit bfcbf33
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 22 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js
@@ -587,17 +587,27 @@ export function getResource(
       return null;
     }
     case 'title': {
-      let child = pendingProps.children;
-      if (Array.isArray(child) && child.length === 1) {
-        child = child[0];
+      const children = pendingProps.children;
+      let child;
+      if (Array.isArray(children)) {
+        child = children.length === 1 ? children[0] : null;
+      } else {
+        child = children;
       }
-      if (typeof child === 'string' || typeof child === 'number') {
+      if (
+        typeof child !== 'function' &&
+        typeof child !== 'symbol' &&
+        child !== null &&
+        child !== undefined
+      ) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        const childString = '' + (child: any);
         const headRoot: Document = getDocumentFromRoot(resourceRoot);
         const headResources = getResourcesFromRoot(headRoot).head;
-        const key = getTitleKey(child);
+        const key = getTitleKey(childString);
         let resource = headResources.get(key);
         if (!resource) {
-          const titleProps = titlePropsFromRawProps(child, pendingProps);
+          const titleProps = titlePropsFromRawProps(childString, pendingProps);
           resource = {
             type: 'title',
             props: titleProps,

diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
@@ -652,17 +652,27 @@ export function resourcesFromElement(type: string, props: Props): boolean {
   const resources = currentResources;
   switch (type) {
     case 'title': {
-      let child = props.children;
-      if (Array.isArray(child) && child.length === 1) {
-        child = child[0];
+      const children = props.children;
+      let child;
+      if (Array.isArray(children)) {
+        child = children.length === 1 ? children[0] : null;
+      } else {
+        child = children;
       }
-      if (typeof child === 'string' || typeof child === 'number') {
-        const key = 'title::' + child;
+      if (
+        typeof child !== 'function' &&
+        typeof child !== 'symbol' &&
+        child !== null &&
+        child !== undefined
+      ) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        const childString = '' + (child: any);
+        const key = 'title::' + childString;
         let resource = resources.headsMap.get(key);
         if (!resource) {
           resource = {
             type: 'title',
-            props: titlePropsFromRawProps(child, props),
+            props: titlePropsFromRawProps(childString, props),
             flushed: false,
           };
           resources.headsMap.set(key, resource);

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -1473,12 +1473,19 @@ function pushTitleImpl(
   }
   target.push(endOfStartTag);
 
-  const child =
-    Array.isArray(children) && children.length < 2
-      ? children[0] || null
-      : children;
-  if (typeof child === 'string' || typeof child === 'number') {
-    target.push(stringToChunk(escapeTextForBrowser(child)));
+  const child = Array.isArray(children)
+    ? children.length < 2
+      ? children[0]
+      : null
+    : children;
+  if (
+    typeof child !== 'function' &&
+    typeof child !== 'symbol' &&
+    child !== null &&
+    child !== undefined
+  ) {
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    target.push(stringToChunk(escapeTextForBrowser('' + child)));
   }
   target.push(endTag1, stringToChunk('title'), endTag2);
   return null;

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -5144,8 +5144,10 @@ describe('ReactDOMFizzServer', () => {
         }
 
         if (gate(flags => flags.enableFloat)) {
-          // invalid titles are not emitted on the server when float is on
-          expect(getVisibleChildren(container)).toEqual(undefined);
+          // object titles are toStringed when float is on
+          expect(getVisibleChildren(container)).toEqual(
+            <title>{'[object Object]'}</title>,
+          );
         } else {
           expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
         }
@@ -5159,8 +5161,10 @@ describe('ReactDOMFizzServer', () => {
         expect(Scheduler).toFlushAndYield([]);
         expect(errors).toEqual([]);
         if (gate(flags => flags.enableFloat)) {
-          // invalid titles are not emitted on the server when float is on
-          expect(getVisibleChildren(container)).toEqual(undefined);
+          // object titles are toStringed when float is on
+          expect(getVisibleChildren(container)).toEqual(
+            <title>{'[object Object]'}</title>,
+          );
         } else {
           expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
         }