Function as children display

[pascalduez]

Hi,

is react-element-to-jsx-string able to output/format a "Function as children"? (More infos)

const Foo = (props) => (
  <div>
    {props.children()}
  </div>
);

const Bar = () => (
  <Foo>{() => (
    <span>Yeah</span>
  )}</Foo>
);

Output from react-element-to-jsx-string:

<Foo />

Expected output:

<Foo>{() => (
  <span>Yeah</span>
)}</Foo>

[vvo]

I think right now this module is sort of a shallow renderer (only root level). This issue is similar to algolia/expect-jsx#24.

Ultimately we COULD be deep but it would have to be implemented.

Let me know if this makes sense.

[pascalduez]

That totally makes sense.

We are currently building our internal styleguide code samples with react-element-to-jsx-string, which allows to use one snippet for preview and code display. Some of our components use the Function as children pattern.

I'll try to evaluate how much work it is to implement this.

[vvo]

Closing this since for being idle. If you want to work on that @pascalduez, feel free to reopen an issue with more details

[lightlii]

@pascalduez did you have any success with this?
Similar case: I'm also working on a styleguide at my company and would like to use this to render code examples but because we use React-intl the output string is incorrect.

reactElementToJSXString(<Text tag="h1" size={Metrics.title} message="Title" />)

Expected output

observed output

thanks in advance

[pascalduez]

@bnjmn-jns This looks like a different issue your describing, more to do with HOC's and displayName.
Quick fix Text.displayName = 'Text';

More thorough:
https://github.com/algolia/react-element-to-jsx-string#reactelementtojsxstringreactelement-options
https://github.com/algolia/react-element-to-jsx-string/blob/master/src/parser/parseReactElement.js#L12-L17

[lightlii]

@pascalduez works like a charm thank you!
and thanks for this library!

[ruyasan]

What about support for function children in the element being rendered.

E.g.

reactElementToJSXString(<Foo>{() => <Whatever />}</Foo>, {showFunctions: true, functionValue: fn => "~replaced function~")

// Expected:
<Foo>~replaced-function~</Foo>
// Actual:
<Foo />

Looking at the source, I believe this is an unintentional side-effect of React.Children.toArray - it will discard any function children as it goes (React.Children.toArray([() => "hi"]) //=> []).