Passing list of objects to react props issue `.find` > usually using an `FSharpList` instead of a regular js array

[jkone27]

note: Array [| ... |] has to be used when passing down collection of objects as props in ReactComponents

while working with Fable/Feliz i notice that if i need to pass to props a list of objects in js, it only works if i use the array construct in F# , but not regular list construct

fix/workaround

most react libraries work with standard js [ ... ] of props, not FSharpList type, so you can cast using Seq.toArray or just using [| ... |] when you need to pass arrays to JS

Interop with other Fable/Feliz components

ofc if a component relies on FSharpList types, it would not work, so i undertsand this limit and not sure what's the right approach...

[Zaid-Ajaj]

Are you talking about [<ReactComponent>] in general or when doing interop?

if you need to pass things to JS: one private function for interop that accepts array, another public function that transform list (the API you want) into array (the API js expects).

It is possible for us to automatically transform F# lists into array when using interop but requires some work on the compiler plugin to do this recursively and I am not sure we need even more magic when the workaround above is simple enough

[MangelMaxime]

It is also important to note that [| .. |] can lead to generated TypeArray like Int32Array.

In general, for interop ResizeArray is recommended because you are guaranteed to get a standard JavaScript array out of it.