refactor: switch SelectableText to JSX

DataBiosphere · Nov 13, 2023 · 3f83c10 · 3f83c10
1 parent a6ff264
commit 3f83c10
Showing 1 changed file with 12 additions and 13 deletions.
diff --git a/src/components/SelectableText.js b/src/components/SelectableText.js
@@ -1,5 +1,5 @@
+import React from 'react';
 import { useState, useEffect, useMemo } from 'react';
-import { div } from 'react-hyperscript-helpers';
 
 const defaultUnselectedStyle = {
   fontSize: '1.8rem',
@@ -24,7 +24,6 @@ export default function SelectableText({label, setSelected, selectedType, styleO
 
   const {baseStyle, tabSelected, tabUnselected, tabHover} = styleOverride;
 
-
   const utilizedUnselectedStyle = useMemo(() => {
     return Object.assign({}, tabUnselected || defaultUnselectedStyle, baseStyle);
   }, [tabUnselected, baseStyle]);
@@ -42,22 +41,22 @@ export default function SelectableText({label, setSelected, selectedType, styleO
     );
   }, [label, selectedType, utilizedSelectedStyle, utilizedUnselectedStyle]);
 
-
   const addHoverEffect = () => {
     setStyle(utilizedHoverStyle);
   };
   const removeHoverEffect = () => {
     setStyle(selectedType === label ? utilizedSelectedStyle : utilizedUnselectedStyle);
   };
 
-
-  return(
-    div({
-      style,
-      onMouseEnter: addHoverEffect,
-      onMouseLeave: removeHoverEffect,
-      onClick: () => !isDisabled && setSelected(label),
-      className: `tab-selection-${label}`
-    }, [label])
+  return (
+    <div
+      style={style}
+      onMouseEnter={addHoverEffect}
+      onMouseLeave={removeHoverEffect}
+      onClick={() => !isDisabled && setSelected(label)}
+      className={`tab-selection-${label}`}
+    >
+      {label}
+    </div>
   );
-}
+}