Any sample of conditional rendering in Class compo...

# react

[frank]

Any sample of conditional rendering in Class component? I try with child() or directly passing my fuctional component but dont work.

class listMsg : RComponent<msgListProps, msgListState>() {
        override fun RBuilder.render() {
            props.msg.forEachIndexed { index, msg ->
                when(msg.type){
                    "log" -> itemLog //Dont work
                    else ->  li {
                        attrs.key = index.toString()
                        div(classes = "receivedMessages") {
                            span(classes = "filledInitials") {
                                +getInitials(msg.nickName)
                            }
                            span(classes = "chatMessage") {
                                +msg.msg
                            }
                        }
                    }
                }
            }
        }
}

val itemLog = functionalComponent<itemLogProps>{ props ->
            li(classes = "log") {
                p {
                    +props.msg
                }
            }
}

[turansky]

Missed key in itemLog?

[frank]

@turansky Yes, I forgotten add key in itemLog but not resolve. It is rare adds the itemLog but with empty text. (attach img)

I have achieved it with RBuilder and return ReactElement and work but the code is very ugly.

How could I simplify RBuilder so that it uses RProps implicitly without having to send the properties?
My Code:

override fun RBuilder.render() {
when (msg.type) {
         "log" -> logitems(index.toString(),msg.msg){}
          else -> li {}
}

fun RBuilder.logitems(key:String, msg:String, function: () -> Unit):ReactElement{
      return li(classes = "log") {
             attrs.key =  key //props.key
              p {
                 +msg //props.msg
                }
       }
 }

Expected Code:

override fun RBuilder.render() {
when (msg.type) {
         "log" -> logitems{
                  attrs.key = index.toString()
                  attrs.msg = msg.msg
                  }
          else -> li {}
}

[frank]

with child() it also works

when (msg.type) {
                    "log" -> child(itemLog){
                        attrs.key = index.toString()
                        attrs.msg = msg.msg
                    }

[frank]

Solved with `RBuilder`:

override fun RBuilder.render() {
            props.msg.forEachIndexed { index, msg ->
                when (msg.type) {
                    "log" -> logitems{
                        key = index.toString()
                        mensaje = msg.msg
                    }
}

fun RBuilder.logitems(props: itemLogProps.() -> Unit): ReactElement {
            return child(itemLog){
                this.attrs(props)
            }
}

        val itemLog = functionalComponent<itemLogProps>{
            props ->
            li(classes = "log") {
                attrs.key = props.key
                p {
                    +props.mensaje
                }
            }
        }