react doesn't update on class change

app.js

@@ -19,44 +19,20 @@ const Input = require('./components/input.js')
 
 
 let backend = new Matrix("user", "pass", "http://localhost")
+backend.sync()
 
 let App = create({
   displayName: "App",
 
-  getInitialState: function() {
-    setTimeout(this.newEvent, 5000)
-    return {
-      events: [
-        {sender: "Foks", content: "Hello"},
-        {sender: "Foks", content: "This is Neo v4"},
-        {sender: "Foks", content: "Here is one test event\nWith\n Multiple\nLines\n:)"},
-        {sender: "Different Foks", content: "Look at these nice colors"},
-        {sender: "Different Foks", content: "And the font"},
-        {sender: "Lain", content: "image"},
-        {sender: "Lain", content: "image"},
-        {sender: "Lain", content: "image"},
-        {sender: "Different Foks", content: "And the avatars"},
-        {sender: "Foks", content: "Every line has it's own message"},
-        {sender: "Foks", content: "But if the sender is the same, we don't repeat the name+image"},
-        {sender: "Foks", content: "Isn't message grouping great?"}
-      ]
-    }
-  },
-
-  newEvent: function() {
-    let events = this.state.events
-    events.push({sender: "Random person", content: "New message"})
-    this.setState({events: events})
-    setTimeout(this.newEvent, 5000)
-  },
-
   render: function() {
+    console.log("Render function")
+    let rooms = backend.getRooms()
     return (
       <>
-        <Sidebar/>
+        <Sidebar rooms={rooms}/>
         <div className="main">
           <Info />
-          <Chat events={this.state.events}/>
+          <Chat events={backend.getEvents()}/>
           <Input />
         </div>
       </>

backends/matrix.js

@@ -1,10 +1,45 @@
 class Matrix {
   constructor(user, password, homeserver) {
-    console.log(user, password)
+    this.a = false
+    this.events = {
+      "roomId": [
+        {sender: "Foks", content: "Hello"},
+        {sender: "Foks", content: "This is Neo v4"},
+        {sender: "Foks", content: "Here is one test event\nWith\n Multiple\nLines\n:)"},
+        {sender: "Different Foks", content: "Look at these nice colors"},
+        {sender: "Different Foks", content: "And the font"},
+        {sender: "Lain", content: "image"},
+        {sender: "Lain", content: "image"},
+        {sender: "Lain", content: "image"},
+        {sender: "Different Foks", content: "And the avatars"},
+        {sender: "Foks", content: "Every line has it's own message"},
+        {sender: "Foks", content: "But if the sender is the same, we don't repeat the name+image"},
+        {sender: "Foks", content: "Isn't message grouping great?"}
+      ]
     }
 
-  getEvents() {
-    console.log("new event")
+    this.rooms = ["Neo", "version 4", "Codename", "Iris", "Let's All Love Lain", "Very long room name abcdefghijklmnopqrstuvwxyz"]
+    this.a = 0
+  }
+
+  getEvents(roomId) {
+    return this.events["roomId"]
+  }
+
+  getRooms() {
+    console.log("getting rooms", this.rooms)
+    return this.rooms
+  }
+
+  sync() {
+    //this.events.push({sender: "Random person", content: "New message"})
+    if (this.a > 0) {
+      console.log("reordering")
+      this.rooms = ["AAAAAAAAAAA"]
+    }
+    console.log(this.a)
+    this.a++
+    setTimeout(() => {this.sync()}, 2000)
   }
 }
 

components/filterList.js

@@ -44,7 +44,7 @@ let FilterList = create({
         content: item,
         key:     id,
         listId:  id,
-        select:  this.select
+        select:  this.select,
       }
       return React.createElement(this.props.element, props)
     })

components/sidebar.js

@@ -13,7 +13,8 @@ let RoomListItem = create({
   getInitialState: function() {
     return {
       filterName: this.props.content.toUpperCase(),
-      unread: Math.random() > 0.7
+      unread: Math.random() > 0.7,
+      pos: this.props.listId
     }
   },
 
@@ -36,7 +37,7 @@ let RoomListItem = create({
     if (this.state.unread) {
       className += " unread"
     }
-    return <div className={className} ref={this.setRef}>
+    return <div className={className} ref={this.setRef} style={{transform: `translate3d(0, ${this.props.listId}00%, 0)`}}>
       <svg id="avatar" data-jdenticon-value={this.props.content}></svg>
       <span id="name">{this.props.content}</span>
     </div>
@@ -60,9 +61,8 @@ let Sidebar = create({
   },
 
   render: function() {
-    let rooms = ["Neo", "version 4", "Codename", "Iris", "Let's All Love Lain", "Very long room name abcdefghijklmnopqrstuvwxyz"]
     return <div className="sidebar">
-      <FilterList items={rooms} element={RoomListItem}/>
+      <FilterList items={this.props.rooms} element={RoomListItem}/>
     </div>
   }
 })

public/scss/style.scss

@@ -87,6 +87,7 @@ body {
 
 .list {
   background: $bg0;
+  position: relative;
 
   div {
     cursor: pointer;
@@ -94,6 +95,8 @@ body {
 }
 
 .roomListItem {
+  position: absolute;
+  top: 0;
   height: 2rem + 2* $spacing;
   display: grid;
   grid-template-columns: 2rem + 2*$spacing - 0.2rem auto;
@@ -101,6 +104,8 @@ body {
   width: 100%;
   box-sizing: border-box;
   border-bottom: 1px solid lighten($bg1, 3);
+  transition: 3s;
+  background: $bg0;
 
   &:hover {
     background: $bg1;