Permalink
Browse files

[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
  • Loading branch information...
1 parent 2da35fc commit beb5b74c54763fd54fed0bf74e6f70d8523f76da @koba04 koba04 committed with gaearon Jan 11, 2017
@@ -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
@@ -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
@@ -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);

0 comments on commit beb5b74

Please sign in to comment.