[Fiber] Fix to render falsy value as dangerouslySetInnerHTML (#8652)

* [Fiber] Fix to render falsy value as dangerouslySetInnerHTML

* Add more cases and rename test for clarity

scripts/fiber/tests-passing.txt

@@ -641,6 +641,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

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

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(
+        <div dangerouslySetInnerHTML={{__html: 'textContent'}} />,
+        container
+      );
+      expect(container.textContent).toEqual('textContent');
+
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: 0}} />,
+        container
+      );
+      expect(container.textContent).toEqual('0');
+
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: false}} />,
+        container
+      );
+      expect(container.textContent).toEqual('false');
+
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: ''}} />,
+        container
+      );
+      expect(container.textContent).toEqual('');
+
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: null}} />,
+        container
+      );
+      expect(container.textContent).toEqual('');
+
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: undefined}} />,
+        container
+      );
+      expect(container.textContent).toEqual('');
+    });
+
     it('should remove attributes', () => {
       var container = document.createElement('div');
       ReactDOM.render(<img height="17" />, container);