How do we use `PropsWithChildren` with the new syntax? ```div { className = classes contents() }``...

# react

[CLOVIS]

How do we use PropsWithChildren with the new syntax?

div {
	className = classes
	contents()
}

This puts the contents in the `div`'s parent component, which means contents are a previous sibling of div. It seems like contents is using the parent's ChildrenBuilder and not the `div`'s.

[turansky]

Do you have small example to reproduce problem?

[CLOVIS]

fun ChildrenBuilder.contents() {
  p { +"3" }
}

val C = FC<Props> {
  p { +"1" }

  div {
    p { +"2" }
    contents()
    p {+"4" }
  }

  p { +"5" }
}

[turansky]

Could you report the issue with this example?

[aerialist]

Hi @CLOVIS,

I tested your sample on latest Kotlin Wrappers (pre290) on IR and Legacy compilers and no problems were detected.

Please check again.

[CLOVIS]

I just updated to pre.290 and I can confirm it is still broken (only tested on IR).

Here's the tree just before the migration: https://gitlab.com/clovis-ai/formulaide/-/tree/07d674fd224c094a989135c4453dab3bc5bd87ef
Here's the tree just after the migration: https://gitlab.com/clovis-ai/formulaide/-/tree/f2ff92c06947c6ad54a5310f5953d5b082650d63

For exact versions, please see versions.properties at the root of the project.

[CLOVIS]

Here's how it looks after the migration

[CLOVIS]

Here's how it looked previously

[CLOVIS]

(notice how all buttons etc appear in their own card)

[CLOVIS]

I implemented the migration by trial-and-error and trying to guess what the proper changes to do were, so there's a non-null chance that I touched something I shouldn't have and it's not on Kotlin React's side, but I honestly don't know what I could have done

[CLOVIS]

95% of the migration was replacing RBuilder with ChildrenBuilder, I didn't change much else

[CLOVIS]

My understanding is that, whenever a function on a ChildrenBuilder is called, the one passed is the one created by the nearest FC in the hierarchy, not necessarily the parent HTML element.

[turansky]

Isolated small example required