diff --git a/docs/docs/jsx-in-depth.md b/docs/docs/jsx-in-depth.md index 282c199d5573..94143dd37cef 100644 --- a/docs/docs/jsx-in-depth.md +++ b/docs/docs/jsx-in-depth.md @@ -218,9 +218,9 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex This behavior is usually not relevant. It's only mentioned here for completeness. -### Props Default to "True" +### Props Default to Empty String -If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent: +If you pass no value for a prop, it defaults to ''. These two JSX expressions are equivalent: ```js diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index 52ac61aeb1fa..461479c2f346 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -800,6 +800,7 @@ src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js * should set values as namespace attributes if necessary * should set values as boolean properties * should convert attribute values to string first +* should set values as boolean attributes * should not remove empty attributes for special properties * should remove for falsey boolean properties * should remove when setting custom attr to null diff --git a/src/renderers/dom/shared/DOMPropertyOperations.js b/src/renderers/dom/shared/DOMPropertyOperations.js index 26e9e6c59316..e8dd5a1a6ade 100644 --- a/src/renderers/dom/shared/DOMPropertyOperations.js +++ b/src/renderers/dom/shared/DOMPropertyOperations.js @@ -188,6 +188,10 @@ var DOMPropertyOperations = { } if (value == null) { node.removeAttribute(name); + } else if (value === true) { + node.setAttribute(name, ''); + } else if (value === false) { + node.removeAttribute(name); } else { node.setAttribute(name, '' + value); } diff --git a/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js index 5fcc92a825aa..b64a5273d677 100644 --- a/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js +++ b/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js @@ -203,6 +203,13 @@ describe('DOMPropertyOperations', () => { expect(stubNode.getAttribute('role')).toBe(''); }); + it('should set values as boolean attributes', () => { + DOMPropertyOperations.setValueForProperty(stubNode, 'data-foo', true); + expect(stubNode.getAttribute('data-foo')).toBe(''); + DOMPropertyOperations.setValueForProperty(stubNode, 'data-foo', false); + expect(stubNode.getAttribute('data-foo')).toBe(null); + }); + it('should not remove empty attributes for special properties', () => { stubNode = document.createElement('input'); ReactDOMComponentTree.precacheNode(stubInstance, stubNode);