Make Multiselect functional

jsx/src/components/CreateGroup/CreateGroup.pre.jsx

@@ -25,7 +25,6 @@ const CreateGroup = (props) => {
                     id="group-name"
                     placeholder="group name..."
                     onChange={(e) => {
-                      console.log(e.target.value);
                       setGroupName(e.target.value);
                     }}
                   ></input>

jsx/src/components/Multiselect/Multiselect.jsx

@@ -1,69 +1,56 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import "./multi-select.css";
 import PropTypes from "prop-types";
 
-export default class Multiselect extends Component {
+const Multiselect = (props) => {
-  static get propTypes() {
+  var { onChange, options, value } = props;
-    return {
-      value: PropTypes.array,
-      onChange: PropTypes.func,
-      options: PropTypes.array,
-    };
-  }
 
-  constructor(props) {
+  var [selected, setSelected] = useState(value);
-    super(props);
-    this.state = {
-      selected: props.value,
-    };
-  }
 
-  render() {
+  if (!options) return null;
-    var { onChange, options, value } = this.props;
 
-    if (!options) return null;
+  return (
-
+    <div className="multi-container">
-    return (
+      <div>
-      <div className="multi-container">
+        {selected.map((e, i) => (
-        <div>
+          <div
-          {this.state.selected.map((e, i) => (
+            key={"selected" + i}
+            className="item selected"
+            onClick={() => {
+              let updated_selection = selected
+                .slice(0, i)
+                .concat(selected.slice(i + 1));
+              onChange(updated_selection, options);
+              setSelected(updated_selection);
+            }}
+          >
+            {e}
+          </div>
+        ))}
+        {options.map((e, i) =>
+          selected.includes(e) ? undefined : (
             <div
-              key={"selected" + i}
+              key={"unselected" + i}
-              className="item selected"
+              className="item unselected"
               onClick={() => {
-                let updated_selection = this.state.selected
+                let updated_selection = selected.concat([e]);
-                  .slice(0, i)
-                  .concat(this.state.selected.slice(i + 1));
                 onChange(updated_selection, options);
-                this.setState(
+                setSelected(updated_selection);
-                  Object.assign({}, this.state, { selected: updated_selection })
-                );
               }}
             >
               {e}
             </div>
-          ))}
+          )
-          {options.map((e, i) =>
+        )}
-            this.state.selected.includes(e) ? undefined : (
-              <div
-                key={"unselected" + i}
-                className="item unselected"
-                onClick={() => {
-                  let updated_selection = this.state.selected.concat([e]);
-                  onChange(updated_selection, options);
-                  this.setState(
-                    Object.assign({}, this.state, {
-                      selected: updated_selection,
-                    })
-                  );
-                }}
-              >
-                {e}
-              </div>
-            )
-          )}
-        </div>
       </div>
-    );
+    </div>
-  }
+  );
-}
+};
+
+Multiselect.propTypes = {
+  value: PropTypes.array,
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+};
+
+export default Multiselect;