More encapsulation

src/App.js

@@ -10,7 +10,6 @@ import GroupStats from "./GroupStats";
 import UserGroups from "./UserGroups";
 import Settings from "./Settings";
 import Progress from "./Progress";
-import CreateSet from "./CreateSet";
 import UserSets from "./UserSets";
 import EditSet from "./EditSet";
 import Error404 from "./Error404";

src/GroupPage.js

@@ -14,10 +14,10 @@ import LinkButton from "./LinkButton";
 import Footer from "./Footer";
 import Error404 from "./Error404";
 import ConfirmationDialog from './ConfirmationDialog';
+import OverlayList from './OverlayList';
 
 import "./css/GroupPage.css";
 import "./css/ConfirmationDialog.css";
-import "./css/OptionsListOverlay.css";
 
 export default withRouter(
   class GroupPage extends Component {
@@ -290,6 +290,7 @@ export default withRouter(
     };
 
     editUserRole = (role) => {
+      role = role.toLowerCase();
       if (role === this.state.editingUser.role) {
         this.setState({
           editingUser: null,
@@ -637,16 +638,11 @@ export default withRouter(
                     </div>
                     {this.state.editingUser && (
                       <>
-                        <div className="overlay" onClick={this.hideEditUserRole}></div>
+                        <OverlayList
-                        <div className="overlay-content options-list-overlay-content">
+                          closeOverlay={this.hideEditUserRole}
-                          {["Owner", "Contributor", "Member", "Remove"].map((role) => (
+                          selectOption={this.editUserRole}
-                            <h3 key={role} onClick={() => this.editUserRole(role.toLowerCase())}>
+                          options={["Owner", "Contributor", "Member", "Remove"]}
-                              {role}
+                        />
-                            </h3>
-                          ))}
-
-                          <div onClick={this.hideEditUserRole}>Cancel</div>
-                        </div>
                       </>
                     )}
                     {this.state.showDeleteGroup && (

src/OverlayList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import "./css/PopUp.css";
+import "./css/OptionsListOverlay.css";
+
+export default function OverlayList(props) {
+  return (
+	<>
+		<div className="overlay" onClick={props.closeOverlay}></div>
+		<div className="overlay-content options-list-overlay-content">
+			{props.options.map((option) => (
+			<h3 key={option} onClick={() => props.selectOption(option)}>
+				{option}
+			</h3>
+			))}
+
+			<div onClick={props.closeOverlay}>Cancel</div>
+		</div>
+	</>
+  );
+}