Skip to content

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

@Freymaurer

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions