diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index 3652f2e52b..21c238fb23 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -27,97 +27,78 @@ const DataListAction = styled(_DataListAction)`
   grid-template-columns: min-content 40px;
 `;
 
-class HostListItem extends React.Component {
-  static propTypes = {
-    host: Host.isRequired,
-    detailUrl: string.isRequired,
-    isSelected: bool.isRequired,
-    onSelect: func.isRequired,
-  };
+function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
+  const labelId = `check-action-${host.id}`;
+  const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
+    ...job,
+    type: 'job',
+  }));
 
-  render() {
-    const { host, isSelected, onSelect, detailUrl, i18n } = this.props;
-
-    const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
-      ...job,
-      type: 'job',
-    }));
-
-    const labelId = `check-action-${host.id}`;
-    return (
-      <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
-        <DataListItemRow>
-          <DataListCheck
-            id={`select-host-${host.id}`}
-            checked={isSelected}
-            onChange={onSelect}
-            aria-labelledby={labelId}
-          />
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="name">
-                <Link to={`${detailUrl}`}>
-                  <b>{host.name}</b>
-                </Link>
-              </DataListCell>,
-              <DataListCell key="recentJobs">
-                <Sparkline jobs={recentPlaybookJobs} />
-              </DataListCell>,
-              <DataListCell key="inventory">
-                {host.summary_fields.inventory && (
-                  <Fragment>
-                    <b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
-                    <Link
-                      to={`/inventories/${
-                        host.summary_fields.inventory.kind === 'smart'
-                          ? 'smart_inventory'
-                          : 'inventory'
-                      }/${host.summary_fields.inventory.id}/details`}
-                    >
-                      {host.summary_fields.inventory.name}
-                    </Link>
-                  </Fragment>
-                )}
-              </DataListCell>,
-              <DataListCell key="enable" alignRight isFilled={false}>
-                <HostToggle host={host} />
-              </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {host.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/hosts/${host.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
-            ]}
-          />
-          <DataListAction
-            aria-label="actions"
-            aria-labelledby={labelId}
-            id={labelId}
-          >
-            <HostToggle host={host} />
-            {host.summary_fields.user_capabilities.edit && (
-              <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                <Button
-                  variant="plain"
-                  component={Link}
-                  to={`/hosts/${host.id}/edit`}
-                >
-                  <PencilAltIcon />
-                </Button>
-              </Tooltip>
-            )}
-          </DataListAction>
-        </DataListItemRow>
-      </DataListItem>
-    );
-  }
+  return (
+    <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-host-${host.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={labelId}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="name">
+              <Link to={`${detailUrl}`}>
+                <b>{host.name}</b>
+              </Link>
+            </DataListCell>,
+            <DataListCell key="recentJobs">
+              <Sparkline jobs={recentPlaybookJobs} />
+            </DataListCell>,
+            <DataListCell key="inventory">
+              {host.summary_fields.inventory && (
+                <Fragment>
+                  <b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
+                  <Link
+                    to={`/inventories/${
+                      host.summary_fields.inventory.kind === 'smart'
+                        ? 'smart_inventory'
+                        : 'inventory'
+                    }/${host.summary_fields.inventory.id}/details`}
+                  >
+                    {host.summary_fields.inventory.name}
+                  </Link>
+                </Fragment>
+              )}
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          <HostToggle host={host} />
+          {host.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Host`)} position="top">
+              <Button
+                variant="plain"
+                component={Link}
+                to={`/hosts/${host.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
+  );
 }
+
+HostListItem.propTypes = {
+  host: Host.isRequired,
+  detailUrl: string.isRequired,
+  isSelected: bool.isRequired,
+  onSelect: func.isRequired,
+};
+
 export default withI18n()(HostListItem);
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx
index 3605a62546..c4958e11c2 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx
@@ -3,7 +3,7 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
 import HostsListItem from './HostListItem';
 
-let onToggleHost;
+const onToggleHost = jest.fn();
 
 const mockHost = {
   id: 1,
@@ -23,16 +23,10 @@ const mockHost = {
 };
 
 describe('<HostsListItem />', () => {
+  let wrapper;
+
   beforeEach(() => {
-    onToggleHost = jest.fn();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('edit button shown to users with edit capabilities', () => {
-    const wrapper = mountWithContexts(
+    wrapper = mountWithContexts(
       <HostsListItem
         isSelected={false}
         detailUrl="/host/1"
@@ -41,13 +35,20 @@ describe('<HostsListItem />', () => {
         onToggleHost={onToggleHost}
       />
     );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('edit button shown to users with edit capabilities', () => {
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
 
   test('edit button hidden from users without edit capabilities', () => {
     const copyMockHost = Object.assign({}, mockHost);
     copyMockHost.summary_fields.user_capabilities.edit = false;
-    const wrapper = mountWithContexts(
+    wrapper = mountWithContexts(
       <HostsListItem
         isSelected={false}
         detailUrl="/host/1"
@@ -58,4 +59,8 @@ describe('<HostsListItem />', () => {
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
+
+  test('should display host toggle', () => {
+    expect(wrapper.find('HostToggle').length).toBe(1);
+  });
 });
diff --git a/awx/ui_next/src/screens/Host/Hosts.jsx b/awx/ui_next/src/screens/Host/Hosts.jsx
index ed48bd8bb0..a590e2c42c 100644
--- a/awx/ui_next/src/screens/Host/Hosts.jsx
+++ b/awx/ui_next/src/screens/Host/Hosts.jsx
@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
-import { Route, withRouter, Switch } from 'react-router-dom';
+import React, { useState, useCallback } from 'react';
+import { Route, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
@@ -11,70 +11,56 @@ import HostList from './HostList';
 import HostAdd from './HostAdd';
 import Host from './Host';
 
-class Hosts extends Component {
-  constructor(props) {
-    super(props);
+function Hosts({ i18n }) {
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+    '/hosts': i18n._(t`Hosts`),
+    '/hosts/add': i18n._(t`Create New Host`),
+  });
 
-    const { i18n } = props;
-
-    this.state = {
-      breadcrumbConfig: {
+  const buildBreadcrumbConfig = useCallback(
+    host => {
+      if (!host) {
+        return;
+      }
+      setBreadcrumbConfig({
         '/hosts': i18n._(t`Hosts`),
         '/hosts/add': i18n._(t`Create New Host`),
-      },
-    };
-  }
+        [`/hosts/${host.id}`]: `${host.name}`,
+        [`/hosts/${host.id}/edit`]: i18n._(t`Edit Details`),
+        [`/hosts/${host.id}/details`]: i18n._(t`Details`),
+        [`/hosts/${host.id}/facts`]: i18n._(t`Facts`),
+        [`/hosts/${host.id}/groups`]: i18n._(t`Groups`),
+        [`/hosts/${host.id}/completed_jobs`]: i18n._(t`Completed Jobs`),
+      });
+    },
+    [i18n]
+  );
 
-  setBreadcrumbConfig = host => {
-    const { i18n } = this.props;
-
-    if (!host) {
-      return;
-    }
-
-    const breadcrumbConfig = {
-      '/hosts': i18n._(t`Hosts`),
-      '/hosts/add': i18n._(t`Create New Host`),
-      [`/hosts/${host.id}`]: `${host.name}`,
-      [`/hosts/${host.id}/edit`]: i18n._(t`Edit Details`),
-      [`/hosts/${host.id}/details`]: i18n._(t`Details`),
-      [`/hosts/${host.id}/facts`]: i18n._(t`Facts`),
-      [`/hosts/${host.id}/groups`]: i18n._(t`Groups`),
-      [`/hosts/${host.id}/completed_jobs`]: i18n._(t`Completed Jobs`),
-    };
-
-    this.setState({ breadcrumbConfig });
-  };
-
-  render() {
-    const { match } = this.props;
-    const { breadcrumbConfig } = this.state;
-
-    return (
-      <Fragment>
-        <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
-        <PageSection>
-          <Card>
-            <Switch>
-              <Route path={`${match.path}/add`} render={() => <HostAdd />} />
-              <Route path={`${match.path}/:id`}>
-                <Config>
-                  {({ me }) => (
-                    <Host
-                      setBreadcrumb={this.setBreadcrumbConfig}
-                      me={me || {}}
-                    />
-                  )}
-                </Config>
-              </Route>
-              <Route path={`${match.path}`} render={() => <HostList />} />
-            </Switch>
-          </Card>
-        </PageSection>
-      </Fragment>
-    );
-  }
+  return (
+    <>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <PageSection>
+        <Card>
+          <Switch>
+            <Route path="/hosts/add">
+              <HostAdd />
+            </Route>
+            <Route path="/hosts/:id">
+              <Config>
+                {({ me }) => (
+                  <Host setBreadcrumb={buildBreadcrumbConfig} me={me || {}} />
+                )}
+              </Config>
+            </Route>
+            <Route path="/hosts">
+              <HostList />
+            </Route>
+          </Switch>
+        </Card>
+      </PageSection>
+    </>
+  );
 }
 
 export { Hosts as _Hosts };
-export default withI18n()(withRouter(Hosts));
+export default withI18n()(Hosts);