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.