Update to strip undefined prop values to match react

vercel · Feb 3, 2020 · dff4aa5 · dff4aa5
1 parent 6ed862d
commit dff4aa5
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 19 deletions.
diff --git a/packages/next/client/head-manager.js b/packages/next/client/head-manager.js
@@ -95,6 +95,9 @@ function reactElementToDOM({ type, props }) {
     if (!props.hasOwnProperty(p)) continue
     if (p === 'children' || p === 'dangerouslySetInnerHTML') continue
 
+    // we don't render undefined props to the DOM
+    if (props[p] === undefined) continue
+
     const attr = DOMAttributeNames[p] || p.toLowerCase()
     el.setAttribute(attr, props[p])
   }

diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
@@ -140,19 +140,8 @@ function reduceComponents(
     .filter(unique())
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
-      const cleanProps: { [key: string]: string } = {}
-
-      Object.keys(c.props).forEach(key => {
-        let val = c.props[key]
-
-        // TODO: do we want to normalize null/true/false here also?
-        if (val === undefined) {
-          val = ''
-        }
-        cleanProps[key] = val
-      })
-
-      return React.cloneElement(c, { key: c.key || i, ...cleanProps })
+      const key = c.key || i
+      return React.cloneElement(c, { key })
     })
 }
 

diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
@@ -1099,11 +1099,11 @@ describe('Client Navigation', () => {
 
   it('should handle undefined prop in head client-side', async () => {
     const browser = await webdriver(context.appPort, '/head')
-    const value = await browser
-      .elementByCss('meta[name="empty-content"]')
-      .getAttribute('content')
+    const value = await browser.eval(
+      `document.querySelector('meta[name="empty-content"]').hasAttribute('content')`
+    )
 
-    expect(value).toBe('')
+    expect(value).toBe(false)
   })
 
   renderingSuite(

diff --git a/test/integration/client-navigation/test/rendering.js b/test/integration/client-navigation/test/rendering.js
@@ -20,9 +20,9 @@ export default function(render, fetch) {
     it('should handle undefined prop in head server-side', async () => {
       const html = await render('/head')
       const $ = cheerio.load(html)
-      const value = $('meta[name="empty-content"]').attr('content')
+      const value = 'content' in $('meta[name="empty-content"]').attr()
 
-      expect(value).toBe('')
+      expect(value).toBe(false)
     })
 
     test('renders with fragment syntax', async () => {