Implement 'composing components'

Author: SebastianAigner

src/main/kotlin/App.kt

@@ -15,6 +15,7 @@ import react.dom.html.ReactHTML.p
 import react.dom.html.ReactHTML.img
 
 val App = FC<Props> {
+    var currentVideo: Video? by useState(null)
     h1 {
         +"Hello, React+Kotlin/JS!"
     }
@@ -24,13 +25,21 @@ val App = FC<Props> {
         }
         VideoList {
             videos = unwatchedVideos
+            selectedVideo = currentVideo
+            onSelectVideo = { video ->
+                currentVideo = video
+            }
         }
 
         h3 {
             +"Videos watched"
         }
         VideoList {
             videos = watchedVideos
+            selectedVideo = currentVideo
+            onSelectVideo = { video ->
+                currentVideo = video
+            }
         }
     }
     div {

src/main/kotlin/VideoList.kt

@@ -5,17 +5,18 @@ import react.dom.html.ReactHTML.p
 
 external interface VideoListProps : Props {
     var videos: List<Video>
+    var selectedVideo: Video?
+    var onSelectVideo: (Video) -> Unit
 }
 
 val VideoList = FC<VideoListProps> { props ->
-    var selectedVideo: Video? by useState(null)
     for (video in props.videos) {
         p {
             key = video.id.toString()
             onClick = {
-                selectedVideo = video
+                props.onSelectVideo(video)
             }
-            if (video == selectedVideo) {
+            if (video == props.selectedVideo) {
                 +"▶ "
             }
             +"${video.speaker}: ${video.title}"