How is ReactInstance supposed to be used?

[cmeeren]

I am using a property that needs a ReactInstance. My code, simplified, is (using Material-UI):

div [] [
  textField [] []
  popper [ AnchorEl (* what to put here to reference the text field above? *) ] []
]

where MaterialProp.AnchorEl: ReactInstance -> MaterialProp.

I see that ReactInstance is an alias for U2<Component<obj, obj>, Element>. But how can I get either a Component or Element for the type I need? I currently generate a random GUID-based ID in the component constructor and use

div [] [
  textField [ Id textFieldId ] []
  popper [ AnchorEl !^(Fable.Import.Browser.document.getElementById textFieldId) ] []
]

which works, but doesn't seem very "react-ish".

[alfonsogarciacaro]

Hmm, I've never seen ReactInstance in the bindings. Not sure what it refers to, but the name is misleading, it seems to indicate an instance of a React class component but looking at Material-UI documentation this doesn't seem to be the case: the anchorEl receives an actual DOM element. So your solution seems to be fine.

[cmeeren]

Thanks! Are you saying that this is the best way to do it? There's no better way that doesn't require generating random IDs exclusively for this use?

Note: ReactInstance can be a Component<_,_> too, not just a plain DOM element:

https://github.com/fable-compiler/fable-react/blob/3b10e28a755c98af9894e0f969555c1e35c3c789/src/Fable.React/Fable.Import.React.fs#L62-L63

[alfonsogarciacaro]

Not sure if it's the "best" way to do it, but I cannot think of an alternative atm as I haven't tested the library :) I tend to trust more the official documentation than the bindings, because they may have errors or be outdate (in fact, I'm thinking of removing the Fable.Import.React file from the library) and the docs for material-ui anchorEl only talk about a DOM element.

You can add the ID to your model if you don't to generate a random one in the view function.

[cmeeren]

Thanks. Random IDs it is, then. :)