I'm testing Hook states. When I declare `onSendMes...

# react

[frank]

I'm testing Hook states. When I declare onSendMessageClicked() function inside of my functionalComponent the elements can't find it and I need to declare it outside.

val chatWindowComponent = functionalComponent<ChatMsgListProps>{ props ->
        val (mensajes,setMensajes) = useState(arrayOf<ReactElement>())

        div(classes = "chatWindow") {
                div {
                    button(classes = "sendMessageButton") {
                        +"Send Message"
                        attrs.type = ButtonType.button
                        attrs.onClickFunction = onSendMessageClicked()
                    }
                }
        }

        fun onSendMessageClicked(): (Event) -> Unit {
            return {
                //Code
            }
        }
    }

The disadvantage of declaring onSendMessageClicked() outside is that I need to send setState in all functions that use it. Alternatives to this?

fun onSendMessageClicked(setMsg: RSetState<Array<ReactElement>>): (Event) -> Unit {
            return {
                //Something(setMsg)
            }
}

[frank]

I have achieved call it with extension fuction to Rbuilder but I dont know if it is bad Practices. Alternatives to this?

fun RBuilder.onSendMessageClicked(): (Event) -> Unit {
            return {
                //Code
            }
}

[andylamax]

Yes, I believe it doesn't follow the react idiom. `onSendMessageClicked`should be a function variable inside ChatMsgListProps that way, it can be passed down as a prop, instead of being able to be invoked from any RBuilder

[frank]

My mistake I need declare onSendMessageClicked() function before of ReactElement for find it in call.

`onSendMessageClicked`should be a function variable inside ChatMsgListProps that way, it can be passed down as a prop, instead of being able to be invoked from any RBuilder

@andylamax, I dont understand you if i declare onclick variable inside of my Props.
Where define my onclick function and how call it? Do you have any sample?

[andylamax]

You need something like this

external interface ChatMsgListProps {
  var onMessageSent:()->Unit
}

val ChatWindowComponent = functionalComponent<ChatMsgListProps> { props->
  div(classes = "chatWindow") {
    div {
      button(classes = "sendMessageButton") {
        +"Send Message"
        attrs.type = ButtonType.button
        attrs.onClickFunction = {props.onMessageSent()}
      }
     }
   }
}

Then after that, you pass your handler at invocation site, something like

child(ChatWindowComponent,jsObject<ChatMsgListProps>{}) {
  attrs.onMessageSent = { /*Handle your call back here*/}
}

[frank]

@andylamax, I got it and I've tried it but the scope of my states is not accessible in my onclick function.
Will i have to send my state as param. of my function? this worsens scalability eg: when i need more than one state or need state in another function.

I could declare state variables as globals but I'm trying to avoid it.

fun onSendMessageClicked(setMsg: RSetState<Array<ReactElement>>): (Event) -> Unit {
      return {
         //Something(setMsg)
      }
}

[andylamax]

1. Why do you have ReactElement as a state? That is a red flag.
2. Sending down state has been the react way until the introduction of the Contex use React.Context to minimize prop drilling.
3. Do your best to avoid `ReactComponent`'s or `ReactElement`'s in your state. Your state shouldn't contain any UI element. Just the model, that the UI can render

[frank]

Why do you have ReactElement  as a state? That is a red flag.

My Project is chat app and the ReactElement is dynamic list of messages.

I need it to update every time I append a message in my list. looking for info in google was the only way I found.

Sending down state has been the react way until the introduction of the Contex use React.Context to minimize prop drilling.

i will try it

[andylamax]

If you are creating a chat app, you should have a list of messages. Not a list of ReactElement , your Component should take an array/list of messages and render a list of ReactElement on its own

[frank]

you should have a list of messages. Not a list of  ReactElement

If I have seen it, I made a mess with ReactElement

I found a good sample of a chat app with react, I will follow it.

@andylamax, You say: Do your best to avoid ReactElement's in your state.
Have you had problems in any app? I have tried it with some examples in react and I have not had problems with React, with Kotlin-react if I had problems.

[andylamax]

That has nothing to do with kotlin-react at all. It is a good paradigm to think of a react component as a function of your model. ui = fun(model) . When your components have other other components as state you will have a hard time scaling in a large application where you need to hoist your state up, and thats going to be a problem. Because you are going to have child components on your hoisted states.

states are for holding data not ui elements This appears in basically all frontend frameworks.

Have you had problems in any app? Yes. When I had no deeper knowledge of states and props, I would stack some elements in my state. It became way harder to maintain my own code. After digging a lot, that is when I realized that paradigm.

[frank]

@andylamax, For passing functions with params as props.
The only options are arrow functions, data-attributes or sub-components?

The performance problems of the Arrow functions are usually serious?

[andylamax]

I am sorry I don't fully grasp the question. Do you mean to ask about the performance of high order functions?

[frank]

I was looking more info about a recommendation from you: should be a function variable inside ChatMsgListProps that way, it can be passed down as a prop and I had a question about the functions with params.

[frank]

Sry, I'm refering to these fuctions: https://ru.react.js.org/docs/faq-functions.html

[andylamax]

Forgive me for not seeing this.. Did you succeed to pass functions to as props in kotlin-react? or was that already solved?