Using a function as a component or element's child about fable-react HOT 2 CLOSED

Awesome, that's working! Thank you for the guidance!

from fable-react.

Yes, fn is to create stateless components, so something like:

let Hello (o:obj) = R.div [] [R.str "Hello world"]
R.fn Hello null []

In JSX would be more or less:

const Hello = () => <div>Hello World</div>;
<Hello />

What you want is to cast directly the function into a React without any instantiation. I had never seen this but I guess an unbox cast (which is erased in runtime by Fable) should work, as it's done for other elements that React accepts as elements (like string).

You can create a simple helper for that, please give it a try and tell me how it works 😄

let Observer: React.ComponentClass<obj> = importMember "mobx-react"

let inline ofFunction2 (f: unit -> ReactElement): ReactElement = unbox f

R.from Observer null [
   ofFunction2 (fun () -> R.div [] [R.str "Hello world"])
]

I'm using ofFunction2 because I'm planning to use ofFunction as alias of fn in the next API, but of course you can use whatever you want 😸

from fable-react.