0

I have an issue where the time on my KotlinJS React web page doesn't update unless it is reloaded. What is the proper way to reload data at a set interval.

import csstype.*
import emotion.react.css
import kotlinx.js.timers.setInterval
import react.FC
import react.Props
import react.ReactNode
import react.dom.html.InputType
import react.dom.html.ReactHTML
import react.dom.html.ReactHTML.div
import react.dom.html.ReactHTML.input
import react.dom.html.ReactHTML.time
import react.useState
import kotlin.js.Date
import kotlin.time.Duration.Companion
import kotlin.time.Duration.Companion.seconds

external interface TitleProp : Props {
    var name: String
    var timeString: String
}
val Title = FC<TitleProp> { props ->

    var currentTime by useState(props.timeString)
    var name by useState(props.name)
    div {
        css {
            padding = 10.px
            backgroundColor = rgb(8, 47, 97)
            color = rgb(56, 246, 137)
            display = Display.flex
            flexDirection = FlexDirection.row
            justifyContent = JustifyContent.spaceBetween
            alignItems = AlignItems.flexStart
            gap = 10.px
            position = Position.absolute
            height = 60.px
            left = 0.pct
            right = 0.pct
            top = 0.px
        }
        div {
            css {
                //width = 133.px
                //height = 77.px
                fontFamily = FontFamily.sansSerif
                fontStyle = FontStyle.normal
                fontWeight = FontWeight.bold
                fontSize = 40.px
                lineHeight = 55.px
            }
            +"$name Information Hub"
        }
        div {
            css {
                fontWeight = FontWeight.bold
                fontSize = 32.px
                lineHeight = 39.px
            }
            + currentTime
        }
    }
    setInterval(1.seconds){
        currentTime = Date().toLocaleTimeString("en-US")
    }
}

I tried using setInterval, like in Javascript how it can re run something, but it doesn't change the time on the page. I think it is changing the text that shows the time but the page isn't registering the page after the first time. I cannot print either, print, println, and console.log all fail to work, so debugging becomes difficult. There is no documentation for KotlinJS React.

a1cd
  • 17,884
  • 4
  • 8
  • 28

0 Answers0