In the new React api in FC components and html tag...

# javascript

[Alexander Sysoev]

In the new React api in FC components and html tags there is such type in context receiver (photo). Is there any way to make lambda with such receiver so i can write this code (or maybe there is an alternative):

fun <P : Props> component(builder: {ChildrenBuilder & P & Props}.() -> Unit): FC<P> {
    return FC<P> {
        builder()
    }
}

[turansky]

Do you want to create components dynamically?

[Alexander Sysoev]

@turansky yeah, kind of, for example to pass css and inner components to dynamic component which has some predefined css (but maybe some other cases)

[turansky]

For predefined css you can use Emotion Styled

[turansky]

Simple example:

[Alexander Sysoev]

what if I want to have a bit more complex logic inside component, and need to insert main content (renderItem) inside some kind of container, now it looks a bit ugly because of two explicit this and attrs parameter in renderItem . It would be great to pass ChildrenBuilder & HTMLAttributes<*> context somehow, maybe there is some approach for that case

[turansky]

You can use following syntax:

div {
    // renderItem returns ReactElement
    +props.renderItem(...)
}

Similar contracts you can find in MUI, Autocomplete component for example

[turansky]

Example