Setting className to null on an element renders an element with a class of "null"

[mnquintana]

Steps to Reproduce

1. Return this JSX in your component's render function

<li className={null}></li>

Expected

The component renders <li></li>

Actual

The component renders <li class="null"></li>

[nathansobo]

This emerges from the way assigning a null className property works on DOM nodes. Try this in your console:

var div = document.createElement('div')
div.className = null
div

The result is as you described. I suppose we could create an exception for this where we completely remove the className from the properties hash if it is defined as null. However, what about the other properties? Should we omit any property with a null value? That seems like it would be surprising.

I can see how this behavior is annoying from a JSX perspective, but I'm unsure about introducing special-case behavior just for className or alternatively deleting any property the user assigns to null on a DOM node.

@BinaryMuse What do you think?

[BinaryMuse]

or alternatively deleting any property the user assigns to null on a DOM node

This is what I'd prefer (and expect) to see, given that it's not easy to conditionally include an attribute on a JSX tag... assuming virtual-dom handles it correctly (see a related React bug at react/react#1448 and the fix at react/react#1510). It seems that boolean properties (and some other properties) must be handled differently than just calling removeAttribute on them.

[nathansobo]

@BinaryMuse so you're in favor of deleting any property going to a normal DOM element that is null or undefined? Or just className?

[coreprocess]

What about: any that is undefined?