react element does not render

[lfeddern]

React element as a child doesn't render, to recreate:

Just renders the cursor:

[lfeddern]

think its something to do with cloneElementWithSpecifiedText() but can't fix. Any help much appreciated!

[jstejada]

@lfeddern sorry for the delay in getting back to you! Unfortunately this use-case is not supported; the way typist works is by traversing the element tree you pass as children and rendering any text it finds inside of it. however, when you use your own custom defined elements, their render implementation is hidden from the element tree and it's just used by React when actually "resolving"/rendering the virtual DOM to actual DOM.

In your example, the children tree looks something like this:

{
 type: Test,
 props: {}
}

As you can see, props is empty, so there's no children to keep traversing and no text that's available in the tree. Your Test element will actually be rendered to text by React when it's actually rendering the virtual dom to actual dom, but the internals of the element are hidden to the parent.

To make it work, you'd need to do something like the following:

<Typist>
  <Test>
    Some text
  </Test>
</Typist>

Hope this helps! I'll try to document this more clearly in the readme. Let me know if you have any questions