`createElement` and `cloneElement`

[zcallan]

There is currently no support for using createElement and cloneElement with the styleName attribute (as far as I've tried), which at times can be a bit painful.

render() {
  const element = ordered ? 'ol' : 'ul';

  return React.createElement(
    element,
    {
      styleName: 'example-style', // <-- This
    },
  );
}

-->

Warning: React does not recognize the `styleName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `stylename` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I haven't read through the source code but t would assume it is a transform thing, where the styleName prop is not read as it's not a JSX prop but rather a passed in as an object. JSX gets transformed into createElements so I would've guessed that this would work automatically but I guess not, unless I'm doing something wrong here.

Wondering if there's any ability for future support?

[zcallan]

I'll note that you can get around this by creating a component for createElement, like below:

const CreateElement = ({ element, children, ...restProps }) => {
  return React.createElement( element, restProps, children );
};

...

render() {
  return (
    <CreateElement
      element="h1"
      styleName="example-style
    />
  );
}

However that's not super ideal.