[JSX] `JSX.create` match cases in children parsed as function call

[Freymaurer]

Hello! Just so this issue is noted somewhere, but using a match case for JSX.create children returns a faulty output:

Note

This was tested with Fable v5.0.0-alpha.14

[<ReactComponent(true)>]
let TestComponent() =
    let counter, setCounter = React.useState(0)
    Fable.Core.JSX.create "ul" [
        "children" ==> [
            match counter with
            | 0 ->  Html.li "No items!" 
            | items -> 
                for i in 1..items do
                    Html.li [
                        prop.key i 
                        prop.text (sprintf "Item %d" i) 
                    ]
        ]
    ]

and the output will be:

export function TestComponent() {
    const patternInput = useState(0);
    const setCounter = patternInput[1];
    const counter = patternInput[0] | 0;
    return <ul>
        {() => { // this lambda function call creates the error
            if (counter === 0) {
                return singleton(<li>
                    No items!
                </li>);
            }
            else {
                const items = counter | 0;
                return map((i) => <li key={i}>
                    {toText(printf("Item %d"))(i)}
                </li>, rangeDouble(1, 1, items));
            }
        }}
    </ul>;
}

if we check the console we can find the following message:

Functions are not valid as a React child. This may happen if you return children instead of <children /> from render. Or maybe you meant to call this function rather than return it.
  <ul>{children}</ul>
warnOnFunctionType @ react-dom-client.development.js:7102

[github-actions]

🤖 This is an automated response from Repo Assist.

Root Cause: The JSX Unroller in src/Fable.Transforms/Fable2Babel.fs handles simple expressions when lifting children out of JSX props. However, when a match expression has multiple branches with for loops or sequences, the F# compiler generates a block-body lambda (an IEnumerable<ReactElement> accumulator pattern). The Unroller doesn't recognise this pattern and leaves the unevaluated lambda as a JSX child — React then errors with "Functions are not valid as a React child."

Workaround: Compute children in a let binding before the JSX.create call:

let items = [
    match counter with
    | 0 -> Html.li "No items!"
    | n ->
        for i in 1..n do
            Html.li [ prop.key i; prop.text $"Item {i}" ]
]
Fable.Core.JSX.create "ul" [ "children" ==> items ]

Fix location: The Unroller active pattern in Fable2Babel.fs needs a new case to eagerly evaluate block-body lambdas used as JSX children.

Generated by 🌈 Repo Assist, see workflow run. Learn more.

To install this agentic workflow, run

gh aw add githubnext/agentics/workflows/repo-assist.md@8f2d44f5d624e31c4af7cdbd948c6f5eba875a85