Added Django REST but have some bugs

static/main/js/control.js

@@ -1,9 +1,60 @@
 "use strict";
-let checkboxes = document.getElementsByName("users");
-let fields = document.querySelectorAll(".checkbox_field");
-if (checkboxes.length == fields.length) {
-  for (let i = 0; i < fields.length; ++i) {
-    let el = checkboxes[i].cloneNode(true);
-    fields[i].appendChild(el);
+
+function move_checkboxes() {
+  let checkboxes = document.getElementsByName("users");
+  let fields = document.querySelectorAll(".checkbox_field");
+  if (checkboxes.length == fields.length) {
+    for (let i = 0; i < fields.length; ++i) {
+      let el = checkboxes[i].cloneNode(true);
+      fields[i].appendChild(el);
+    }
   }
 }
+
+class TableRow extends React.Component {
+  render() {
+    return (
+      <tr>
+        <td>
+          <a href="#">{this.props.user.name}</a>
+        </td>
+        <td>{this.props.user.user.email}</td>
+        <td>{this.props.user.role}</td>
+        <td className="checkbox_field"></td>
+      </tr>
+    );
+  }
+}
+
+class TableBody extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { users: [] };
+  }
+
+  get_users() {
+    axios.get("/api/users").then((response) => {
+      this.setState({ users: response.data });
+    });
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.get_users();
+      move_checkboxes();
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return this.state.users.map((user, key) => (
+      <TableRow user={user} key={key} />
+    ));
+  }
+}
+
+move_checkboxes();
+ReactDOM.render(<TableBody />, document.getElementById("table"));