I am trying to render a tree of elements recursively with React FC. ```val RecursiveRenderer = FC&lt...

# react

[Björn Lilleike]

I am trying to render a tree of elements recursively with React FC.

val RecursiveRenderer = FC<ArticyObjectProps> { props ->
    Typography {
        +"${props.articy.Id} of ${props.articy.Type}"
    }
    props.articy.Children?.forEach { sub: ArticyObject ->
        RecursiveRenderer { articy = sub }
    }
}

The compiler error is "Type checking has run into a recursive problem. Easiest workaround: specify types of your declarations explicitly".
But what types I could declare more explicitly I have no idea.
I have seen examples in Typescript so this should be possible, but there is no ignore option for this, is there?

[turansky]

val RecursiveRenderer : FC<ArticyObjectProps> = FC { ... }

?

[Björn Lilleike]

Thank you. Now the new Issue is: "Variable 'FlowFragmentRenderer' must be initialized".

[turansky]

Compiler error?

[Björn Lilleike]

yes

[Björn Lilleike]

I tricked the compiler into doing what I wanted with reading the FC-class from an enum.

enum class ArticyTypes(val renderer: FC<ArticyObjectProps>) { GENERIC(renderer = RecursiveRenderer); }

within The RecursiveRenderer I can now use:
ArticyTypes.GENERIC.renderer { articy = sub; level = props.level + 1 }

But would be nice to know a simpler working syntax.

[turansky]

IR or Legacy?

[Björn Lilleike]

Currently LEGACY, because it is a bit faster for continuous builds, which is the main pain point for our frontend devs

[Mikhail]

I have found another way to avoid this compiler error - use lazy:

val ListItem: FC<ListItemProps> by lazy {
  FC {
    //...
    ListItem {
      //...
    }
    //...
  }
}

It works well