Fable icon indicating copy to clipboard operation
Fable copied to clipboard

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

Open Freymaurer opened this issue 3 months ago • 0 comments

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

Freymaurer avatar Sep 17 '25 07:09 Freymaurer