diff --git a/src/components/modals/DacDatasetsModal.js b/src/components/modals/DacDatasetsModal.js
index bc2feb454..bf2f0baf5 100644
--- a/src/components/modals/DacDatasetsModal.js
+++ b/src/components/modals/DacDatasetsModal.js
@@ -1,120 +1,130 @@
 import find from 'lodash/find';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import { Component } from 'react';
-import { a, div, hh, span, table, tbody, td, th, thead, tr } from 'react-hyperscript-helpers';
-import { BaseModal } from '../BaseModal';
-import { ReadMore } from '../ReadMore';
-import { DataUseTranslation } from '../../libs/dataUseTranslation';
+import React, {useEffect, useState} from 'react';
+import {BaseModal} from '../BaseModal';
+import {DataUseTranslation} from '../../libs/dataUseTranslation';
 
-export const DacDatasetsModal = hh(class DacDatasetsModal extends Component {
+// @ts-ignore
+const DacDatasetsModal = (props) => {
 
-  constructor() {
-    super();
-    this.state = {
-      translatedDataUse: [],
-      getStructuredUseRestrictionLink: this.getStructuredUseRestrictionLink.bind(this)
+  const {showModal, onCloseRequest, datasets, dac} = props;
+  const [translatedDatasetRestrictions, setTranslatedDatasetRestrictions] = useState([]);
+
+  useEffect(() => {
+    const init = async () => {
+      // @ts-ignore
+      let translationPromises = datasets.map((dataset) =>
+        DataUseTranslation.translateDataUseRestrictions(dataset.dataUse));
+      const datasetTranslations = await Promise.all(translationPromises);
+      // @ts-ignore
+      setTranslatedDatasetRestrictions(datasetTranslations);
     };
-  }
 
-  async componentDidMount() {
-    let translationPromises = this.props.datasets.map((dataset) =>
-      DataUseTranslation.translateDataUseRestrictions(dataset.dataUse));
-    const datasetTranslations = await Promise.all(translationPromises);
-    this.setState(prev => {
-      prev.translatedDatasetRestrictions = datasetTranslations;
-      return prev;
-    });
-  }
+    init();
+  }, [datasets]);
 
-  getProperty = (properties, propName) => {
-    return find(properties, p => { return p.propertyName.toLowerCase() === propName.toLowerCase(); });
+  // @ts-ignore
+  const getProperty = (properties, propName) => {
+    return find(properties, p => {
+      return p.propertyName.toLowerCase() === propName.toLowerCase();
+    });
   };
 
-  getPropertyValue = (properties, propName, defaultValue) => {
-    const prop = this.getProperty(properties, propName);
+  // @ts-ignore
+  const getPropertyValue = (properties, propName, defaultValue) => {
+    const prop = getProperty(properties, propName);
     const val = get(prop, 'propertyValue', '');
-    return isEmpty(val) ? span({ className: 'disabled' }, [defaultValue]) : val;
+    return isEmpty(val) ? <span className={'disabled'}>{defaultValue}</span> : val;
   };
 
-  getDbGapLinkValue = (properties) => {
-    const href = this.getPropertyValue(properties, 'dbGAP', '');
+  // @ts-ignore
+  const getDbGapLinkValue = (properties) => {
+    const href = getPropertyValue(properties, 'dbGAP', '');
     return href.length > 0 ?
-      a({ name: 'link_dbGap', href: href, target: '_blank', className: 'enabled' }, ['Link']) :
-      span({ name: 'link_dbGap', className: 'disabled' }, ['---']);
+      <a href={href} target={'_blank'} className={'enabled'} rel="noreferrer">Link</a> :
+      <span className={'disabled'}>---</span>;
   };
 
-  getStructuredUseRestrictionLink = (index) => {
-    if(this.state.translatedDatasetRestrictions && this.state.translatedDatasetRestrictions[index]) {
-      const translatedDataUse = this.state.translatedDatasetRestrictions[index]
+  // @ts-ignore
+  const getStructuredUseRestrictionLink = (index) => {
+    if (translatedDatasetRestrictions[index]) {
+      const translatedDataUse = translatedDatasetRestrictions[index]
+        // @ts-ignore
         .map((translations) => translations.description)
         .join('\n');
+      const shortenedDataUse = translatedDataUse.length >= 75 ?
+        translatedDataUse.slice(0, 75) + '...' :
+        translatedDataUse;
       if (isEmpty(translatedDataUse)) {
-        return span({ className: 'disabled' }, ['---']);
+        return <span className={'disabled'}>---</span>;
       }
-      return ReadMore({
-        content: translatedDataUse,
-        className: 'row no-margin',
-        style: { whiteSpace: 'pre-line' },
-        charLimit: 30,
-        inline: true
-      });
+      return <span title={translatedDataUse}>{shortenedDataUse}</span>;
     }
   };
 
-  render() {
-    return (BaseModal({
-      id: 'dacDatasetsModal',
-      showModal: this.props.showModal,
-      onRequestClose: this.props.onCloseRequest,
-      color: 'common',
-      type: 'informative',
-      iconSize: 'none',
-      customStyles: { width: '80%' },
-      title: 'DAC Datasets associated with DAC: ' + this.props.dac.name,
-      action: { label: 'Close', handler: this.props.onCloseRequest }
-    },
-    [
-      div({ className: 'table-scroll', style: { margin: 0 } }, [
-        table({ className: 'table' }, [
-          thead({}, [
-            tr({}, [
-              th({ className: 'table-titles dataset-color cell-size' }, ['Dataset Id']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Dataset Name']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['dbGap']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Structured Data Use Limitations']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Data Type']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Phenotype/Indication']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Principal Investigator(PI)']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['# of participants']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Description']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Species']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Data Depositor']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['Consent ID']),
-              th({ className: 'table-titles dataset-color cell-size' }, ['SC-ID'])
-            ])
-          ]),
-          tbody({}, [
-            this.props.datasets.map((dataset, index) => {
-              return tr({ key: dataset.datasetIdentifier }, [
-                td({ className: 'table-items cell-size', style: { position: 'relative' } }, [dataset.datasetIdentifier]),
-                td({ className: 'table-items cell-size' }, [dataset.name]),
-                td({ className: 'table-items cell-size' }, [this.getDbGapLinkValue(dataset.properties)]),
-                td({ className: 'table-items cell-size' }, [this.getStructuredUseRestrictionLink(index)]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Data Type', '---')]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Phenotype/Indication', '---')]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Principal Investigator(PI)', '---')]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, '# of participants', '---')]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Description', '---')]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Species', '---')]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Data Depositor', '---')]),
-                td({ className: 'table-items cell-size' }, [dataset.consentId]),
-                td({ className: 'table-items cell-size' }, [this.getPropertyValue(dataset.properties, 'Sample Collection ID', '---')])
-              ]);
+  // @ts-ignore
+  return <BaseModal
+    key={'dac_datasets_modal'}
+    id={'dacDatasetsModal'}
+    showModal={showModal}
+    onRequestClose={onCloseRequest}
+    color={'common'}
+    type={'informative'}
+    iconSize={'none'}
+    customStyles={{width: '80%'}}
+    title={'DAC Datasets associated with DAC: ' + dac.name}
+    action={{label: 'Close', handler: onCloseRequest}}>
+    <div key={'dac_datasets'} className={'table-scroll'} style={{margin: 0}}>
+      <table key={'dac_datasets_table'} className={'table'}>
+        <thead key={'dac_datasets_table_head'}>
+          <tr key={'dac_datasets_table_head_row'}>
+            <th key={'1'} className={'table-titles dataset-color cell-size'}>Dataset Id</th>
+            <th key={'2'} className={'table-titles dataset-color cell-size'}>Dataset Name</th>
+            <th key={'3'} className={'table-titles dataset-color cell-size'}>dbGap</th>
+            <th key={'4'} className={'table-titles dataset-color cell-size'}>Structured Data Use Limitations</th>
+            <th key={'5'} className={'table-titles dataset-color cell-size'}>Data Type</th>
+            <th key={'6'} className={'table-titles dataset-color cell-size'}>Phenotype/Indication</th>
+            <th key={'7'} className={'table-titles dataset-color cell-size'}>Principal Investigator(PI)</th>
+            <th key={'8'} className={'table-titles dataset-color cell-size'}># of participants</th>
+            <th key={'9'} className={'table-titles dataset-color cell-size'}>Description</th>
+            <th key={'10'} className={'table-titles dataset-color cell-size'}>Species</th>
+            <th key={'11'} className={'table-titles dataset-color cell-size'}>Data Depositor</th>
+          </tr>
+        </thead>
+        <tbody key={'dac_datasets_table_body'}>
+          {
+          // @ts-ignore
+            datasets.map((dataset, index) => {
+              return <tr key={'dac_datasets_table_row_' + index + '_' + dataset.datasetIdentifier}>
+                <td key={'1_' + dataset.datasetIdentifier} className={'table-items cell-size'}
+                  style={{position: 'relative'}}>{dataset.datasetIdentifier}</td>
+                <td key={'2_' + dataset.datasetIdentifier} className={'table-items cell-size'}>{dataset.name}</td>
+                <td key={'3_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getDbGapLinkValue(dataset.properties)}</td>
+                <td key={'4_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getStructuredUseRestrictionLink(index)}</td>
+                <td key={'5_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Data Type', '---')}</td>
+                <td key={'6_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Phenotype/Indication', '---')}</td>
+                <td key={'7_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Principal Investigator(PI)', '---')}</td>
+                <td key={'8_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getPropertyValue(dataset.properties, '# of participants', '---')}</td>
+                <td key={'9_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Description', '---')}</td>
+                <td key={'10_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Species', '---')}</td>
+                <td key={'11_' + dataset.datasetIdentifier}
+                  className={'table-items cell-size'}>{getPropertyValue(dataset.properties, 'Data Depositor', '---')}</td>
+              </tr>;
             })
-          ])
-        ])
-      ])
-    ]));
-  }
-});
+          }
+        </tbody>
+      </table>
+    </div>
+  </BaseModal>;
+};
+
+export default DacDatasetsModal;
diff --git a/src/pages/manage_dac/ManageDac.js b/src/pages/manage_dac/ManageDac.js
index bc7d8e3b7..b4a815233 100644
--- a/src/pages/manage_dac/ManageDac.js
+++ b/src/pages/manage_dac/ManageDac.js
@@ -8,7 +8,7 @@ import {contains, filter, map} from 'lodash/fp';
 import {Storage} from '../../libs/storage';
 import {Notifications} from '../../libs/utils';
 import {AddDacModal} from './AddDacModal';
-import {DacDatasetsModal} from '../../components/modals/DacDatasetsModal';
+import DacDatasetsModal from '../../components/modals/DacDatasetsModal';
 import {DacMembersModal} from './DacMembersModal';
 import ConfirmationModal from '../../components/modals/ConfirmationModal';