Adjust the details component to be a little more polymorphic.

frontend/src/modules/requests/components/request/details-row.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+
+import { RequestSchema } from '../../types';
+import * as styles from './styles.css';
+
+function getText(data, request) {
+  const value = get(request, data.key);
+
+  switch (data.inputType) {
+    case 'checkbox':
+      return <div>{value ? 'Yes' : 'No'}</div>;
+
+    case 'radio':
+      return data.values.find(d => d.value === value).label;
+
+    default:
+      return value || '-';
+  }
+}
+
+function DetailsRow({ data, request }) {
+  const { key, label } = data;
+  const text = getText(data, request);
+  return (
+    <div id={`request-${key}-field`} className={styles.fieldRow}>
+      <h6>{label}</h6>
+      <p id={`request-${key}-text`}>{text}</p>
+    </div>
+  );
+}
+
+DetailsRow.propTypes = {
+  data: PropTypes.shape({
+    label: PropTypes.string,
+    key: PropTypes.string,
+  }).isRequired,
+  request: RequestSchema.isRequired,
+};
+
+export default DetailsRow;

frontend/src/modules/requests/components/request/details.jsx

@@ -11,6 +11,7 @@ import { Prompt } from 'react-router-dom';
 import { uid } from 'react-uid';
 import { _e } from '@src/utils';
 
+import DetailsRow from './details-row';
 import { RequestSchema } from '../../types';
 import * as styles from './styles.css';
 
@@ -78,14 +79,7 @@ function RequestDetails({
           {fields
             .filter(d => d.key !== 'name')
             .map(d => (
-              <div
-                key={uid(d)}
-                id={`request-${d.key}-field`}
-                className={styles.fieldRow}
-              >
-                <h6>{d.label}</h6>
-                <p id={`request-${d.key}-text`}>{data[d.key] || '-'}</p>
-              </div>
+              <DetailsRow key={uid(d)} data={d} request={data} />
             ))}
         </div>
       )}