I'm worried about the need to call the children function to be able to format it's result. This could have unwanted side effect in the user land.

For example:

reactElementToJSXString(
 <div>
 {() => {
 console.log('Should not be logged');
 return <div>Hello World</div>;
 }}
 </div>,
 {
 showFunctions: true,
 }
)

One gotcha with this detection method is is case of mixed children (or multiple function as a children):

// Multiple functions as child
reactElementToJSXString(
 <div>
 {() => <div>Hello Foo</div>}
 {() => <div>Hello Bar</div>}
 </div>,
 {
 showFunctions: true,
 }
)
// Mixed content
reactElementToJSXString(
 <div>
 {() => <div>Hello Foo</div>}
 <span>Some other children</span>
 </div>,
 {
 showFunctions: true,
 }
)

I know this is should not be frequent or maybe event imaginable but the JSX allow it 🤷‍♂️

I do some try with you PR, it's a shame that React.Children filters out the function children. We do not want to re-implement it to be able to conserve function in our parsing.

This and this is related to React.Children behavior.