Dont use self-closing tags, skip null and undefined JSX attributes, simpler prop generation using spread

Author: developit

src/index.js

@@ -21,11 +21,8 @@ export default function renderToString(vnode) {
 
 	// components
 	if (typeof nodeName==='function') {
-		let props = { children },
+		let props = { children, ...attributes },
 			rendered;
-		for (let i in attributes) if (HOP.call(attributes, i)) {
-			props[i] = attributes[i];
-		}
 
 		if (typeof nodeName.prototype.render!=='function') {
 			// stateless functional components
@@ -42,14 +39,18 @@ export default function renderToString(vnode) {
 
 	// render JSX to HTML
 	let s = `<${nodeName}`;
-	for (let name in attributes) if (HOP.call(attributes, name)) {
-		s += ` ${name}="${escape(attributes[name])}"`;
+	for (let name in attributes) {
+		if (HOP.call(attributes, name)) {
+			let v = attributes[name];
+			if (v!==null && v!==undefined) {
+				s += ` ${name}="${escape(v)}"`;
+			}
+		}
 	}
+	s += '>';
 	if (children && children.length) {
-		s += `>${children.map(renderToString).join('')}</${nodeName}>`;
-	}
-	else {
-		s += ' />';
+		s += children.map(renderToString).join('');
 	}
+	s += `</${nodeName}>`
 	return s;
 };

test/index.js

@@ -13,6 +13,13 @@ describe('render-to-string', () => {
 
 			expect(rendered).to.equal(expected);
 		});
+
+		it('should omit null and undefined attributes', () => {
+			let rendered = render(<div a={null} b={undefined} />),
+				expected = `<div></div>`;
+
+			expect(rendered).to.equal(expected);
+		});
 	});
 
 	describe('Functional Components', () => {