diff --git a/components/form/checkbox-multiple-select/CheckboxMultipleSelect.es6.js b/components/form/checkbox-multiple-select/CheckboxMultipleSelect.es6.js
index b98cb14..7eb18fb 100644
--- a/components/form/checkbox-multiple-select/CheckboxMultipleSelect.es6.js
+++ b/components/form/checkbox-multiple-select/CheckboxMultipleSelect.es6.js
@@ -99,8 +99,8 @@ class CheckboxMultipleSelect extends React.Component {
           }
         </div>
         {this.state.isOpened && (<div className="ds-checkbox-select__dropdown">
-          {options.map(option => (
-            <div className="ds-checkbox-select__item" key={option}>
+          {options.map((option, index) => (
+            <div className="ds-checkbox-select__item" key={`${option}-${index}`}>
               <Checkbox
                 checked={selected[option]}
                 disabled={disabled[option]}
diff --git a/components/form/dimension/DimensionInput.es6.js b/components/form/dimension/DimensionInput.es6.js
index fd815be..35da2d9 100644
--- a/components/form/dimension/DimensionInput.es6.js
+++ b/components/form/dimension/DimensionInput.es6.js
@@ -60,8 +60,8 @@ class DimensionInput extends React.Component {
               onChange={this.onUnitChange}
               search={false}
             >
-              {units.map(unit => (
-                <Option label={unit} value={unit} key={unit} />
+              {units.map((unit, index) => (
+                <Option label={unit} value={unit} key={`${unit}-${index}`} />
               ))}
             </Select>
           </div>
diff --git a/components/form/dimension/DimensionSelect.es6.js b/components/form/dimension/DimensionSelect.es6.js
index b543069..4518d7a 100644
--- a/components/form/dimension/DimensionSelect.es6.js
+++ b/components/form/dimension/DimensionSelect.es6.js
@@ -20,8 +20,8 @@ class DimensionSelect extends React.Component {
             onChange={onChange}
             search={false}
           >
-            {choices.map(choice => (
-              <Option label={choice} value={choice} key={choice} />
+            {choices.map((choice, index) => (
+              <Option label={choice} value={choice} key={`${choice}-${index}`} />
             ))}
           </Select>
         </div>
diff --git a/components/form/filter-option/FilterOption.es6.js b/components/form/filter-option/FilterOption.es6.js
index add4a28..74b94de 100644
--- a/components/form/filter-option/FilterOption.es6.js
+++ b/components/form/filter-option/FilterOption.es6.js
@@ -44,7 +44,7 @@ class FilterOption extends React.Component {
         <div className="ds-filter-option__items">
           {filters.map((filter, idx) => (
             <FilterOptionItem
-              key={idx}
+              key={`filter-option-item-${idx}`}
               filter={filter}
               filterableFields={filterableFields}
               handleRemoveFilter={() => handleRemoveFilter(idx)}
diff --git a/components/form/filter-option/FilterOptionItem.es6.js b/components/form/filter-option/FilterOptionItem.es6.js
index fdbfd03..1c4b54d 100644
--- a/components/form/filter-option/FilterOptionItem.es6.js
+++ b/components/form/filter-option/FilterOptionItem.es6.js
@@ -59,9 +59,9 @@ class FilterOptionItem extends React.Component {
                 onChange={fieldName => { handleUpdateFilter({ field_name: fieldName }) }}
                 placeholder={deslugifiedFieldName}
               >
-                {filterableFields.map(field => (
+                {filterableFields.map((field, index) => (
                   <Option
-                    key={field}
+                    key={`${field}-${index}`}
                     label={deslugify(field)}
                     value={field}
                   />
@@ -76,7 +76,7 @@ class FilterOptionItem extends React.Component {
               >
                 {validOperators.map((operator, idx) => (
                   <Option
-                    key={idx}
+                    key={`valid-operator-${idx}`}
                     label={`${operator.display}...`}
                     value={operator.symbol}
                   />
diff --git a/components/form/filter-option/FilterOptionSelect.es6.js b/components/form/filter-option/FilterOptionSelect.es6.js
index 078af68..8309380 100644
--- a/components/form/filter-option/FilterOptionSelect.es6.js
+++ b/components/form/filter-option/FilterOptionSelect.es6.js
@@ -27,9 +27,9 @@ class FilterOptionSelect extends React.Component {
         <div className="ds-filter-option__select-header">
           Filter by...
         </div>
-        {filterableFields.map(field => (
+        {filterableFields.map((field, index) => (
           <div
-            key={field}
+            key={`${field}-${index}`}
             className="ds-filter-option__select-item"
             onClick={() => onFilterSelect(field)}
           >
diff --git a/components/form/select/MiniSelect.es6.js b/components/form/select/MiniSelect.es6.js
index 4dd5fee..2b658e2 100644
--- a/components/form/select/MiniSelect.es6.js
+++ b/components/form/select/MiniSelect.es6.js
@@ -62,9 +62,9 @@ class MiniSelect extends React.Component {
       <div className={classNames} ref={(node) => { this.selectNode = node }}>
         <div className="ds-mini-select__dropdown-toggle" onClick={this.onToggle}>{selectValue}</div>
         {isOpened && <ul className="ds-mini-select__dropdown-menu">
-          {selectOptions.map(option => (<li
+          {selectOptions.map((option, index) => (<li
             onClick={e => this.handleSelect(option)}
-            key={option}>{option}</li>))}
+            key={`${option}-${index}`}>{option}</li>))}
         </ul>}
       </div>
     )
diff --git a/components/layout/list/DragList.es6.js b/components/layout/list/DragList.es6.js
index a042c99..62f69be 100644
--- a/components/layout/list/DragList.es6.js
+++ b/components/layout/list/DragList.es6.js
@@ -37,13 +37,13 @@ class DragList extends React.Component {
       const content = typeof child === 'string' ? <ListItemContent>{child}</ListItemContent> : child
       return (
         <Draggable
-          key={draggableId}
+          key={`draggable-element-${draggableId}`}
           isDragDisabled={isDragAndDropDisabled}
           draggableId={draggableId}
         >
           {(provided, snapshot) => [
             <ListItem
-              key={draggableId}
+              key={`draggable-list-item-${draggableId}`}
               {...otherChildProps}
               listItemRef={provided.innerRef}
               dragStyles={provided.draggableStyle}
@@ -52,7 +52,7 @@ class DragList extends React.Component {
               {!isDragAndDropDisabled && <ListItemIcon draggableIcon {...provided.dragHandleProps} />}
               {content}
             </ListItem>,
-            <div key={`key-${draggableId}`}>{provided.placeholder}</div>
+            <div key={`draggable-element-placeholder-${draggableId}`}>{provided.placeholder}</div>
           ]}
         </Draggable>
       )
diff --git a/components/layout/nav-indicator/NavIndicator.es6.js b/components/layout/nav-indicator/NavIndicator.es6.js
index 9284554..ac5120c 100644
--- a/components/layout/nav-indicator/NavIndicator.es6.js
+++ b/components/layout/nav-indicator/NavIndicator.es6.js
@@ -13,7 +13,7 @@ function NavIndicator ({ currentStep, totalSteps }) {
         (isActive, index) => (
           <span
             className={classnames({ 'nav-indicator__active': isActive })}
-            key={index}
+            key={`nav-indicator-${index}`}
           ></span>
         )
       )}
diff --git a/components/layout/sidebar/header/QuickActions.es6.js b/components/layout/sidebar/header/QuickActions.es6.js
index 77138ed..7ac05b9 100644
--- a/components/layout/sidebar/header/QuickActions.es6.js
+++ b/components/layout/sidebar/header/QuickActions.es6.js
@@ -18,7 +18,7 @@ function QuickActions ({ actions, onSelect, label }) {
     <ul className="ds-dropdown__menu">
       <DropdownMenuLabel label={label} />
       {actions.map(({ icon, text, divider, actionLabel, action, hidden, disabled, onActionSelect }, index) => (
-        <Fragment key={text}>
+        <Fragment key={`${text}-${index}`}>
           {actionLabel && <DropdownMenuLabel label={actionLabel} />}
           <li
             className={classnames({
diff --git a/components/layout/sidebar/header/QuickDialog.es6.js b/components/layout/sidebar/header/QuickDialog.es6.js
index 2b4580a..b960aea 100644
--- a/components/layout/sidebar/header/QuickDialog.es6.js
+++ b/components/layout/sidebar/header/QuickDialog.es6.js
@@ -17,7 +17,7 @@ function QuickDialog ({ title, body, buttons, onButtonClicked }) {
         onClick={() => {
           onButtonClicked(index)
         }}
-        key={button.label}
+        key={`${button.label}-${index}`}
       >{button.label}</button>)}
     </div>}
   </div>)
diff --git a/package.json b/package.json
index c58971f..5273523 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@b12/metronome",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "",
   "main": "index.es6.js",
   "scripts": {
diff --git a/styleguide/components/ComponentList.es6.js b/styleguide/components/ComponentList.es6.js
index d37013a..3e36b74 100644
--- a/styleguide/components/ComponentList.es6.js
+++ b/styleguide/components/ComponentList.es6.js
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react'
 
 
 const ComponentListSection = ({
-  href, 
+  href,
   visibleName,
   content,
   selected
@@ -31,8 +31,8 @@ const ComponentList = ({
 }) => {
   return (
     <Fragment>
-      {items.map(item => (
-        <ComponentListSection key={item.slug} {...item} />
+      {items.map((item, index) => (
+        <ComponentListSection key={`${item.slug}-${index}`} {...item} />
       ))}
     </Fragment>
   )
diff --git a/styleguide/components/PropsTable.es6.js b/styleguide/components/PropsTable.es6.js
index 75cd08d..1de3937 100644
--- a/styleguide/components/PropsTable.es6.js
+++ b/styleguide/components/PropsTable.es6.js
@@ -12,8 +12,8 @@ const PropsTable = ({ columns, rows, getRowKey }) => {
     <Table>
       <TableHead>
         <TableRow>
-          {columns.map(({ caption }) => (
-            <TableCell key={caption} align="left">
+          {columns.map(({ caption }, index) => (
+            <TableCell key={`${caption}-${index}`} align="left">
               {caption}
             </TableCell>
           ))}
@@ -23,9 +23,9 @@ const PropsTable = ({ columns, rows, getRowKey }) => {
         {rows.map(row => (
           <TableRow key={getRowKey(row)}>
             {columns.map(({ render }, index) => (
-              <TableCell key={index}>{render(row)}</TableCell>
+              <TableCell key={`table-cell-${index}`}>{render(row)}</TableCell>
             ))}
-          </TableRow> 
+          </TableRow>
         ))}
       </TableBody>
     </Table>