diff --git a/src/pages-and-resources/discussions/FeaturesTable.jsx b/src/pages-and-resources/discussions/FeaturesTable.jsx index 25b03369e..4327bc97b 100644 --- a/src/pages-and-resources/discussions/FeaturesTable.jsx +++ b/src/pages-and-resources/discussions/FeaturesTable.jsx @@ -8,47 +8,45 @@ import messages from './messages'; function FeaturesTable({ apps, features, intl }) { return ( - <> - { - const appCheckmarkCells = {}; - // DataTable wants 'data' to be an array of objects where each property of an object - // represents a cell in that row, identified by its key. - apps.forEach(app => { - // If our app's set of feature Ids includes this feature, return a checkmark. - // i.e, if this app has the current feature, check it! - appCheckmarkCells[app.id] = app.featureIds.includes(feature.id) ? ( -
- -
- ) : null; - }); + { + const appCheckmarkCells = {}; + // DataTable wants 'data' to be an array of objects where each property of an object + // represents a cell in that row, identified by its key. + apps.forEach(app => { + // If our app's set of feature Ids includes this feature, return a checkmark. + // i.e, if this app has the current feature, check it! + appCheckmarkCells[app.id] = app.featureIds.includes(feature.id) ? ( +
+ +
+ ) : null; + }); - return { - feature: intl.formatMessage(messages[`featureName-${feature.id}`]), // 'feature' is the identifier for cells in the first column. - // This is spreading the app IDs from appCheckmarkCells into the return array, creating - // one object with 'feature' and the app.id keys from above. The values are the JSX - // above with the font awesome checkmarks in 'em - ...appCheckmarkCells, - }; - })} - columns={[ - { - Header: '', - accessor: 'feature', - }, - // We're converting our apps array into a bunch of objects with "Header" and "accessor" - // keys, like DataTable expects. - ...apps.map(app => ({ - Header: intl.formatMessage(messages[`appName-${app.id}`]), - accessor: app.id, - })), - ]} - > - -
- + return { + feature: intl.formatMessage(messages[`featureName-${feature.id}`]), // 'feature' is the identifier for cells in the first column. + // This is spreading the app IDs from appCheckmarkCells into the return array, creating + // one object with 'feature' and the app.id keys from above. The values are the JSX + // above with the font awesome checkmarks in 'em + ...appCheckmarkCells, + }; + })} + columns={[ + { + Header: '', + accessor: 'feature', + }, + // We're converting our apps array into a bunch of objects with "Header" and "accessor" + // keys, like DataTable expects. + ...apps.map(app => ({ + Header: intl.formatMessage(messages[`appName-${app.id}`]), + accessor: app.id, + })), + ]} + > + +
); }