Error when aliasing a raw element
waynebaylor opened this issue · comments
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
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.
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.