Discussion on: KotlinJS and State Hooks

[Pavel Zemlianikin]

Thank you for the post! I just started learning react, but I think it's better to use data class instead of interface and anonymous class impl for component's state. You can set initial state with default values in constructor and then reuse it to reset state of component. Also with .copy(...) you can update one or several properties a time.

interface FooProps : StyledProps {
    var message: String
}

data class FooState(val isOpen: Boolean = false, val isSubmitting: Boolean = false) : State

val fooComponent = fc<FooProps> { props ->
    // Set initial state on component rendering
    val (state, setState) = useState(FooState())

    fun handleOnShowClick() {
        // Update a single property of the state
        setState(state.copy(isOpen = true))
    }

    fun handleOnSubmittingClick() {
        setState(state.copy(isSubmitting = true))
    }

    button {
        attrs.onClick = { handleOnShowClick() }
    }
    div {
        attrs.visible = state.isOpen
        p {
            +props.message
        }
        button {
            attrs.onClick = { handleOnSubmittingClick() }
            +"submit"
        }
        button {
            // Reset the state
            attrs.onClick = { setState(FooState()) }
            +"close"
        }
    }
}

fun RBuilder.foo(message: String) =
    child(fooComponent) {
        attrs.message = message
    }