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

Merged
merged 2 commits into from Jan 11, 2017

Projects

None yet

5 participants

@koba04
Contributor
koba04 commented Dec 29, 2016 edited

This is to fix a bug which is unable to render falsy values(0 or '' or false) as dangerouslySetInnerHTML.

@@ -398,10 +398,11 @@ function updateDOMProperties(
} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
var nextHtml = nextProp ? nextProp[HTML] : undefined;
var lastHtml = lastProp ? lastProp[HTML] : undefined;
- if (nextHtml) {
+ if (nextHtml || nextHtml === 0 || nextHtml === '') {
@edvinerikson
edvinerikson Dec 29, 2016 Member

Maybe do a typeof instead? that is what we have done in other places where we need to detect numbers / strings. I am not sure this works with negative values

@koba04
koba04 Dec 29, 2016 Contributor

Thanks! That makes sense. I'll update it.

@koba04
koba04 Dec 29, 2016 Contributor

Fixed it.

@@ -398,10 +398,15 @@ function updateDOMProperties(
} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
var nextHtml = nextProp ? nextProp[HTML] : undefined;
var lastHtml = lastProp ? lastProp[HTML] : undefined;
- if (nextHtml) {
+ if (
+ nextHtml ||
@edvinerikson
edvinerikson Dec 29, 2016 Member

Do we even need this check now?

@koba04
koba04 Dec 29, 2016 Contributor

This is for consistent with stack reconciler.
Because stack reconciler can render other than string and number.

@edvinerikson
edvinerikson Dec 29, 2016 Member

Ah okay 👍

@acdlite
acdlite Jan 6, 2017 Member

What about false? Does Stack render that?

@gaearon gaearon requested a review from acdlite Dec 30, 2016
@@ -398,10 +398,15 @@ function updateDOMProperties(
} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
var nextHtml = nextProp ? nextProp[HTML] : undefined;
var lastHtml = lastProp ? lastProp[HTML] : undefined;
- if (nextHtml) {
+ if (
+ nextHtml ||
@acdlite
acdlite Jan 6, 2017 Member

What about false? Does Stack render that?

@@ -44,6 +44,28 @@ describe('ReactDOMFiber', () => {
expect(container.textContent).toEqual('10');
});
+ it('should render dangerouslySetInnerHTML', () => {
@acdlite
acdlite Jan 6, 2017 Member

Let's put this test in ReactDOMComponent-test.js next to the other dangrouslySetInnerHTML tests. And give it a more specific name, like "can dangerouslySetInnerHTML with falsy value."

@acdlite
acdlite Jan 9, 2017 Member

Thank you for moving the test. Can you remove the ones in this file now? We don't need duplicates because ReactDOMComponent-test is run in both Stack and Fiber mode.

@koba04
koba04 Jan 10, 2017 Contributor

@acdlite OK, fixed it. I've added the tests using ReactDOM.render instead of _createContentMarkup into ReactDOMComponent-test.

@koba04
Contributor
koba04 commented Jan 6, 2017

@acdlite Thank you for your review! I've put the tests for falsy values in ReactDOMComponent-test.js and fixed the behavior for false. In stack, dangrouslySetInnerHTML={{_html: false}} is rendered as false.

@@ -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) {
@koba04
koba04 Jan 6, 2017 Contributor

Does this condition still need? It seems to be unnecessary because it is covered by if (lastHtml !== nextHtml).

@acdlite
acdlite Jan 9, 2017 Member

Hmm idk why that branch was there. Seems ok to remove it.

concerns were addressed

@gaearon
Member
gaearon commented Jan 11, 2017

This looks good, thank you for fixing!

@gaearon gaearon merged commit beb5b74 into facebook:master Jan 11, 2017

1 check was pending

ci/circleci Your tests are queued behind your running builds
Details
@koba04
Contributor
koba04 commented Jan 12, 2017

Thank you!

@koba04 koba04 deleted the koba04:fix-render-dangerouslySetInnerHTML branch Jan 12, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment