Improve formatting

facebook · Apr 20, 2022 · 21a7b3e · 21a7b3e
1 parent f5e5e98
commit 21a7b3e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -246,8 +246,8 @@ describe('ReactDOMServerHydration', () => {
       fit('warns when client renders an extra element as only child', () => {
         function Mismatch({isClient}) {
           return (
-            <div className="parent">
-              {isClient && <main className="only" style={{opacity: 1}} />}
+            <div className="parent" style={{ opacity: 1}} onClick={() => {}}>
+              {isClient && <main className="only" style={{ opacity: 1 }} onClick={() => {}} />}
             </div>
           );
         }

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1235,14 +1235,20 @@ function formatProps(props): string {
     }
     const attributeName = prop;
     const value = props[prop];
-    if (value != null) {
-      // TODO: what about non-strings
+    if (
+      value != null &&
+      typeof value !== 'function' &&
+      typeof value !== 'symbol'
+    ) {
       let trimmedValue = JSON.stringify(value);
       if (value.length > 30) {
         trimmedValue = value.substr(0, 30) + '...';
       }
-      // TODO: what about quotes in attr values
-      str += ' ' + attributeName + '={' + trimmedValue + '}';
+      if (typeof value === 'string') {
+        str += ' ' + attributeName + '=' + trimmedValue + '';
+      } else {
+        str += ' ' + attributeName + '={' + trimmedValue + '}';
+      }
     }
     i++;
   }