Updated plain key prop values

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]}

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>

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>

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)}

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}
                   />

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)}
           >

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>
     )

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>
       )

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>
         )
       )}

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({

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>)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b12/metronome",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "",
   "main": "index.es6.js",
   "scripts": {

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>
   )

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>