diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index c56a44b5b28..7c754729798 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -638,6 +638,7 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js * should allow named slot projection on both web components and regular DOM elements * should skip reserved props on web components * should skip dangerouslySetInnerHTML on web components +* should render null and undefined as empty but print other falsy values * should remove attributes * should remove properties * should properly update custom attributes on custom elements diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js index f583cfc5e0f..f75c0ad9ebb 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js +++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js @@ -398,13 +398,10 @@ function updateDOMProperties( } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { var nextHtml = nextProp ? nextProp[HTML] : undefined; var lastHtml = lastProp ? lastProp[HTML] : undefined; - if (nextHtml) { - if (lastHtml) { - if (lastHtml !== nextHtml) { - setInnerHTML(domElement, '' + nextHtml); - } - } else { - setInnerHTML(domElement, nextHtml); + // Intentional use of != to avoid catching zero/false. + if (nextHtml != null) { + if (lastHtml !== nextHtml) { + setInnerHTML(domElement, '' + nextHtml); } } else { // TODO: It might be too late to clear this if we have children diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index 96f456a32eb..294987ac84d 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -300,6 +300,46 @@ describe('ReactDOMComponent', () => { ).toBe(false); }); + it('should render null and undefined as empty but print other falsy values', () => { + var container = document.createElement('div'); + + ReactDOM.render( +
, + container + ); + expect(container.textContent).toEqual('textContent'); + + ReactDOM.render( + , + container + ); + expect(container.textContent).toEqual('0'); + + ReactDOM.render( + , + container + ); + expect(container.textContent).toEqual('false'); + + ReactDOM.render( + , + container + ); + expect(container.textContent).toEqual(''); + + ReactDOM.render( + , + container + ); + expect(container.textContent).toEqual(''); + + ReactDOM.render( + , + container + ); + expect(container.textContent).toEqual(''); + }); + it('should remove attributes', () => { var container = document.createElement('div'); ReactDOM.render(