-
Notifications
You must be signed in to change notification settings - Fork 316
Open
Description
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:7102Metadata
Metadata
Assignees
Labels
No labels