Error when aliasing a raw element

[waynebaylor]

This works as expected:

function Greeting({ name = "World" }) {
  return <div>Hello {name}</div>;
}

const Works = Greeting;

renderer.render(<Works/>, document.body);

However, the browser gives an error when you do this:

const DoesNotWork = <div>Goodbye</div>;

renderer.render(<DoesNotWork/>, document.body);

Unknown tag: [object Object]

CodeSandbox example: https://codesandbox.io/s/gallant-sutherland-f78dl

[Brian Kim]

I think this is expected behavior. The second example should not work because it is using an element as a tag. The correct way to call renderer.render() with DoesNotWork would be to not wrap it in JSX (renderer.render(DoesNotWork, document.body)).

I’m not sure there is a use-case for trying to use an element as an element tag and would be interested to know if any other JSX library/framework has attempted it and for what use case.

[waynebaylor]

Doh! Good point.

I was passing a component as a prop to another component and didn't think to just wrap the prop with { } since it's already a component.